桶锉和摇树

Question

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

我试图了解使用 Barrel 文件从库项目中导出函数和类时，将其导入另一个使用 webpack 的项目时会产生什么影响，并且应该能够对捆绑包进行 treeshake。

假设我有一个项目：

图书馆

• index.ts

• libA.ts

• libB.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。
tsconfig.json

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

Commonjs 模块系统 doesn't support 在 webpack 中摇树（只有像你上面所做的那样直接导入才能工作 mylib/libA）。
要修复 github 存储库中的树抖动，您应该在 tsconfig.json 中使用 module: es2015 或 esnext。

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

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

1. Plugin to improve treeshaking
2. Side effects webpack 选项
3. Used exports webpack 选项
4. 从webpack 移动到rollup。 Rollup 默认具有一流的树抖动功能（我不建议在大型项目中这样做）。