当使用带有next.js应用程序和可构建包的turborepo-monoreo时，条件导出和捆绑包大小不一致

Question

只是试图使用Turborepo:构建JS/TS单回购

.
└── root
├── apps
│   ├── first-app (next.js app)
│   └── second-app (next.js app)
├── configs (ts, tsup)
└── packages
└── ui (react lib)

可在此处找到用于复制的公共回购。我有以下两个问题：

1.Next.js应用程序似乎无法识别可构建包的条件导出mjs/cjs扩展

复制

# second-app build will fail
pnpm build second-app...

预期行为

Next.js应用程序应该能够解决mjs/cjs条件导出

当前解决方法

当前的黑客攻击包括对可构建的包工件使用js扩展：

// ./configs/tsup.config.base.ts
// REPLACE THIS:
outExtension({ format }) {
return {
js: `.${format === "esm" ? "mjs" : "cjs"}` // UNCLEAR WHY THIS DOES NOT WORK???
}
}
// BY THAT:
outExtension({ format }) {
return {
js: `.${format === "esm" ? "esm.js" : "cjs.js"}` // THIS WORKS
}
}

// `./packages/ui/package.json`
// REPLACE THIS:
"exports": {
".": {
"import": "./.build/index.mjs",
"require": "./.build/index.cjs"
}
},
// BY THAT:
"exports": {
".": {
"import": "./.build/index.esm.js",
"require": "./.build/index.cjs.js"
}
},

2.束大小不一致

复制

# Make sure the changes above are made for builds to work
# This shows 92kb first load JS
pnpm build --filter first-app
# This shows 143kb first load JS ?!
pnpm build --filter second-app...

预期行为

first-app和second-app是基于Next.js/MUI模板的同一个简单应用程序，唯一的区别是second-app从ui可构建包中导入了该模板的一些与MUI/情感相关的代码(而不是直接依赖关系(。

我原以为这两个应用程序第一次加载JS时会很接近，但它显示出大约50kb的差异。

当前解决方法

没有，鉴于我在捆扎机方面的经验有限，目前我不知道该如何妥善解决这个问题。

非常感谢你的帮助，

Answer 1

尝试将其添加到可构建包的package.json上

"sideEffects": false,

读数：

• https://webpack.js.org/guides/tree-shaking/#mark-文件作为副作用免费

• https://stackoverflow.com/a/69866774/7674911