webpack – 如果没有使用它们,则无法使用树震动React和依赖项

发布时间：2020-12-15 20:20:27 所属栏目：百科来源：网络整理

导读：我无法使用死代码来消除未使用的React组件. 我在这里创建了一个示例项目 – https://github.com/amithgeorge/webpack-issue-demo-1 … 定义了三个类, A类是使用prop-types的反应组件, B类是使用connect HOC连接到redux的反应组件, C类是一个简单的类而不是反

我无法使用死代码来消除未使用的React组件.

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

定义了三个类,

> A类是使用prop-types的反应组件,
> B类是使用connect HOC连接到redux的反应组件,
> 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并删除co??nnect,则ClassA和ClassB的代码不存在.但输出仍然包含React,PropTypes和React-Redux的完整代码.如果没有使用这些,我如何让webpack删除它们.

解决方法

根据我的理解 – Tree Shaking仅适用于ES2015模块,而不适用于CommonJS模块.

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

enter image description here

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

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

但是,如果您将其导出为CommonJS module.exports = MyClass并且不使用 – 它仍将是您的捆绑包的一部分.

同样的概念也适用于Node_Modules.

CommonJS模块

> axios
> reactjs

ESM模块

> lodash-es

如果你只是导入axios并且不使用它 – 它仍然是bundle的一部分但是未使用的lodash-es将不会.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!