webpack - 如果不使用 React 和依赖项，则无法对其进行树摇动

Question

我在删除未使用的 React 组件时遇到了死代码问题。

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

定义了三个类，

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

代码 - 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和具有 class 的 file1.js MyClass。

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

但是如果你将它导出为 CommonJSmodule.exports = MyClass并且不使用 - 它仍然是你的包的一部分。

同样的概念也适用于 Node_Modules。

CommonJS 模块

1. axios
2. 反应

ESM 模块

1. lodash-es

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