webpack - 桶锉和摇树

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

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

想象一下我有一个项目：

图书馆

index.ts 有这个代码：

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

所以我使用索引作为桶文件来导出我将在我的库中开发的所有功能。

第二个项目将是：

图书馆用户

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 工作？

感谢您的任何帮助：）

标签： webpackimporttree-shaking

它看起来像您的代码中的模块问题，而不是 webpack。
tsconfig.json

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

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

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

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