摇树创建反应应用程序？

Posted 2023-02-19

【中文标题】摇树创建反应应用程序？

【英文标题】：Tree shaking create-react-app?

【发布时间】：2018-01-08 23:08:56

【问题描述】：

我使用 create-react-app 创建了我的 React 应用程序，现在使用带有 create-react-app-typescript 的 TypeScript。

一切正常，但问题是 - 特别是因为我使用了好但很重的material-ui - 构建的包的大小非常大 - 几乎达到 1MB。

如何使用摇树工具（如在 Webpack 2 或 rollup 中？ 我不想 eject 已经如此看来我真的无法访问 Webpack 配置。

我希望可以对缩小的代码进行树摇：)

谢谢！

【问题讨论】：

相关github问题github.com/facebookincubator/create-react-app/issues/2748

【参考方案1】：

我们在 create-react-app-typescript 项目中重写了我们对 material-ui 的导入，方法是从这种样式更改它们：

import FloatingActionButton from "material-ui";

到这里：

import FloatingActionButton from "material-ui/FloatingActionButton";

编辑： 这提供了更多背景信息：https://github.com/mui-org/material-ui/issues/11916#issuecomment-401214838

【讨论】：

迈克，你找到更好的方法了吗？

没有，但我们还没有升级到最新版本。我们落后了很多。

Mike，最新的 create-react-app 是几小时前发布的，并且有我们需要的修复。添加它作为答案。

【参考方案2】：

如果您的项目是使用 create-react-app 构建的，则最新版本已修复，只需将 react-scripts 更新到 2.0.4 或更高版本即可。

npm install react-scripts@latest --save

由于更新了依赖项，这个新版本具有出色的摇树效果。我已经使用 material-ui 和 mdi-material-ui 进行了测试。