webpack 桶锉和摇树

pb3skfrl 于 2022-11-24 发布在 Webpack

关注(0)|答案(2)|浏览(159)

以下是一个示例存储库，其中显示了此主题中报告的问题的示例：https://github.com/Eux86/tree-shaking-barrel-test/blob/master/README.md * 的最大值

我试图理解使用Barrel文件从一个库项目导出函数和类的效果，当将其导入到另一个使用webpack的项目时，应该能够对包进行树抖动。
假设我有一个项目：
图书馆

index.ts
libA.ts
libB.ts

index.ts具有以下代码：

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

所以我使用index作为一个桶文件来导出我将要在我的库中开发的所有函数。
第二个项目将是：
图书馆用户

index.ts

Index.ts具有以下代码：

import { LibAMain } from 'library'

LibAMain();

现在：library-user是使用webpack构建的，我希望它能够对MyLib中未使用的库进行树型扫描，但是当我查看生成的包时，我发现它包含了 Boot LibA.js和LibB.js，这两个文件不应该在那里：

如果将index.ts更改为：

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

LibAMain();

那么webpack就很好地完成了它的工作，我只在最后一个包中看到LibA：

TL;DR：我怎样才能继续使用桶索引文件，只从“library”导入所有内容，但仍然让树摇工作？
谢谢你的帮助：）

webpack

来源：https://stackoverflow.com/questions/58527907/barrel-file-and-tree-shaking

2条答案

按热度按时间

dnph8jn41#

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

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

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

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

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

Plugin to improve treeshaking
1.副作用Webpack选项
1.已使用导出webpack选项
1.从webpack移动到rollup。默认情况下，Rollup具有一流的树抖动（我不建议在大型项目中这样做）。

赞(0）回复(0）举报 2022-11-24

eh57zj3b2#

通过寻找我自己的问题Webpack doesn't split a huge vendor file when modules are exported and imported using index files的答案，我找到了一个同样适用于这种情况的解决方案。
基本上，您可以继续使用桶文件，但您需要禁用这些特定文件（桶文件）的副作用。
我已经在两个不同的项目中使用不同版本的Webpack（4和5）尝试了这个解决方案，它在两个项目上都有效。
以下是配置的相关部分：

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

下面是一个链接到GitHub的问题，我找到了解释：是的。

赞(0）回复(0）举报 2022-11-24

我来回答

webpack 桶锉和摇树

2条答案

相关问题

热门标签

最新问答