摇树创建反应应用程序? [英] Tree shaking create-react-app?

问题描述

我使用 create-react-app 创建了我的 React 应用程序，现在将 TypeScript 与create-react-app-typescript.

I created my React app with create-react-app and now use TypeScript with create-react-app-typescript.

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

Everything works ok, but the problem is - especially because I use the good but heavy material-ui - the size of the built bundle is quite big - almost reaching 1MB.

如何使用摇树工具(例如在 Webpack 2 或 rollup 中)?我不想 eject 已经所以看起来我真的没有访问 Webpack 配置的权限.

How can I use tree shaking tools (like in Webpack 2 or rollup? I don't want to eject already so seems like I don't really have access to the Webpack configuration.

我希望有可能对缩小的代码进行树摇:)

I wish it was possible to tree shake a minified code :)

谢谢！

推荐答案

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

If your project was built with create-react-app, the latest version has the fix, just update react-scripts to version 2.0.4 or higher.

npm install react-scripts@latest --save

由于更新了依赖项，此新版本具有出色的树摇动功能.我已经使用 material-ui 和 mdi-material-ui 进行了测试.

This new version has excellent tree shaking thanks to the updated dependencies. I've tested with both material-ui and mdi-material-ui.

这篇关于摇树创建反应应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！