[英]Tree shaking create-react-app?
I created my React app with create-react-app and now use TypeScript with create-react-app-typescript .我使用create-react-app创建了我的 React 应用程序,现在将 TypeScript 与create-react-app- typescript 一起使用。
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.一切正常,但问题是 - 特别是因为我使用了很好但很重的material-ui - 构建包的大小相当大 - 几乎达到 1MB。
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.我如何使用 tree shaking 工具(如 Webpack 2 或rollup ?我不想eject
,所以看起来我真的无法访问 Webpack 配置。
I wish it was possible to tree shake a minified code:)我希望可以对缩小的代码进行 tree shake :)
Thanks!谢谢!
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. 如果您的项目是使用create-react-app构建的,则最新版本具有此修复程序,只需将react-scripts更新到2.0.4或更高版本。
npm install react-scripts@latest --save
This new version has excellent tree shaking thanks to the updated dependencies. 由于更新的依赖项,这个新版本具有出色的树抖动。 I've tested with both material-ui and mdi-material-ui. 我用材料-ui和mdi-material-ui进行了测试。
We rewrote our imports for material-ui
in our create-react-app-typescript project by changing them from this style: 我们在create-react-app-typescript项目中通过从这种样式更改它们来重写我们对material-ui
导入:
import {FloatingActionButton} from "material-ui";
to this: 对此:
import FloatingActionButton from "material-ui/FloatingActionButton";
Edit: This gives a little more context: https://github.com/mui-org/material-ui/issues/11916#issuecomment-401214838 编辑:这提供了更多的背景: https : //github.com/mui-org/material-ui/issues/11916#issuecomment-401214838
In case you use typscript, my fix was to change "module": "commonjs",
to "module": "ESNext",
in all tsconfig.json
files.如果您使用 typscript,我的解决方法是在所有tsconfig.json
文件中将“module”: "module": "commonjs",
更改为"module": "ESNext",
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.