桶形文件和摇树

Question

这是一个示例存储库，显示了此线程中报告的问题的示例：https : //github.com/Eux86/tree-shaking-barrel-test/blob/master/README.md

我试图了解使用 Barrel 文件从库项目中导出函数和类的效果是什么，当将它导入到另一个使用 webpack 的项目中并且应该能够对包进行 treeshake 时。

假设我有一个项目：

图书馆

• 索引.ts

• libA.ts

• 库文件

index.ts 有这个代码：

export { LibAMain } from 'LibA';
export { LibBMain } from 'LibB';

所以我使用 index 作为桶文件来导出我将在我的库中开发的所有函数。

第二个项目将是：

图书馆用户

• 索引.ts

Index.ts 有这样的代码：

import { LibAMain } from 'library'

LibAMain();

现在：library-user 是使用 webpack 构建的，我希望它能够对 MyLib 中未使用的库进行 treeshake，但是当我查看生成的包时，我看到它包含引导 LibA.js 和 LibB.js，这不应该在那里：

如果我将 index.ts 更改为：

import { LibAMain } from 'library/lib/LibA'

LibAMain();

然后 webpack 很好地完成了它的工作，我只在最终包中看到了 LibA：

TL;DR：我怎样才能继续使用桶索引文件并只从“库”中导入所有内容，但仍然使 treeshaking 工作？

感谢您的任何帮助 ：）

Answer 1

它看起来像是代码中的模块问题，而不是 webpack。
配置文件

...
"module": "commonjs",
...

Commonjs 模块系统不支持webpack 中的树摇动（只有像上面那样直接导入才有效mylib/libA）。
要修复 github 存储库中的树抖动，您应该使用module:es2015或esnext在tsconfig.json.

...
"module": "esnext",
...

但你是对的 - 不幸的是，摇树并不是 webpack 最好的一面。
有几种方法可以更好地摇晃你的树：

1. 用于改进 treeshaking 的插件
2. 副作用webpack 选项
3. 使用导出webpack 选项
4. 从 移动webpack到rollup。Rollup 默认有一流的​​ treeShaking（我不建议大型项目这样做）。

Answer 2

通过寻找我自己的问题的答案，Webpack 在使用桶文件时不会分割巨大的供应商包，我找到了一个也适用于这种情况的解决方案。

基本上您可以继续使用木桶文件，但您需要禁用这些特定文件（木桶文件）的副作用。

我已经在两个不同版本的Webpack（4和5 ）的独立项目中尝试过这个解决方案，并且它适用于这两个项目。

这是配置的相关部分：

{
  module: {
    rules: [
      // other rules...
      {
        test: [/src\/common\/index.ts/i, /src\/hooks\/index.ts/i],
        sideEffects: false,
      }
    ]
  }
}

以下是 GitHub 问题的链接，我在其中找到了解释： https: //github.com/vercel/next.js/issues/12557。