如果不使用它们，则无法摇动React和依赖项

Question

我在消除未使用的React组件的死代码方面遇到麻烦。

我在这里创建了一个示例项目-https://github.com/amithgeorge/webpack-issue-demo-1 ...

定义了三个类，

• class A是使用prop-types的react组件
• class B是使用connect HOC
连接到redux的React组件
• class C是一个简单的类，而不是react组件-

代码-https://github.com/amithgeorge/webpack-issue-demo-1/blob/5643302db776263db857259cc00c2bafe46acb8c/src/classes.js ....

在入口文件中，我仅导入C类并使用它-https://github.com/amithgeorge/webpack-issue-demo-1/blob/5643302db776263db857259cc00c2bafe46acb8c/src/index.js

我希望输出文件仅包含类C，但是它包含了所有内容！

https://github.com/amithgeorge/webpack-issue-demo-1/blob/5643302db776263db857259cc00c2bafe46acb8c/dist/main.js

如果我删除了propTypes并删除了connect，那么ClassA和ClassB的代码将不存在。但是输出仍然具有React，PropTypes和React-Redux的完整代码。如果没有使用它们，如何获取webpack删除它们。

Answer 1

据我了解-Tree Shaking仅适用于ES2015模块，不适用于CommonJS模块。

https://webpack.js.org/guides/tree-shaking/

为了测试这一点，我创建了一个repo here和具有类MyClass的file1.js。

现在，如果您尝试将其导出为ESM并且不在index.js内部使用-它会不成为您捆绑包的一部分。

但是，如果您将其导出为CommonJS module.exports = MyClass并且不使用-它仍将成为捆绑软件的一部分。

相同的概念也适用于Node_Modules。

CommonJS模块

1. axios
2. reactjs

ESM模块

1. lodash-es

如果您只是导入axios而不使用它-它仍将成为捆绑软件的一部分，但未使用的lodash-es不会成为捆绑软件。