如果没有使用它们,则无法使树抖动React和依赖项
Ami*_*rge 5 webpack tree-shaking
我无法使用死代码来消除未使用的React组件.
我在这里创建了一个示例项目 - https://github.com/amithgeorge/webpack-issue-demo-1 ...
定义了三个类,
class A是使用道具类型的反应组件,class B是与redux连接的反应组件,使用connect HOC,class C是一个简单的类而不是反应组件 -
在条目文件中,我只导入C类并使用它 - https://github.com/amithgeorge/webpack-issue-demo-1/blob/5643302db776263db857259cc00c2bafe46acb8c/src/index.js
我希望输出文件只包含C类,但它拥有一切!
如果我删除propTypes并删除connect,则ClassA和ClassB的代码不存在.但输出仍然包含React,PropTypes和React-Redux的完整代码.如果没有使用这些,我如何让webpack删除它们.
据我了解 - Tree Shaking 仅适用于 ES2015 模块，不适用于 CommonJS 模块。
https://webpack.js.org/guides/tree-shaking/
为了测试这一点，我在这里创建了一个存储库和具有 class 的 file1.js MyClass。
现在，如果您尝试将其导出为 ESM 并且不在内部使用index.js- 它将不会成为您的捆绑包的一部分。
但是，如果您将其导出为 CommonJSmodule.exports = MyClass并且不使用 - 它仍然会是您的捆绑包的一部分。
同样的概念也适用于 Node_Module。
CommonJS 模块
ESM模块
如果您只是导入axios而不使用它 - 它仍然是捆绑包的一部分，但未使用的lodash-es则不会。
| 归档时间： |
|
| 查看次数： |
411 次 |
| 最近记录： |