webpack - 如果不使用 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 模块

axios

reactjs

ESM 模块

lodash-es

如果你只是导入 axios并且不要使用它 - 它仍然是捆绑包的一部分但未使用 lodash-es不会的。