Menu
I created my React app with create-react-app and now use TypeScript with 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.
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 :)
Thanks!
374
If you're using modern tooling, such as webpack, create-react-app and similars, you already have tree shaking set up. Tree shaking or dead code elimination means that unused modules will not be included in the bundle during the build process.
In Rollup, there is literally nothing you need to setup to gain the Tree Shaking capability within your codes. The only thing to do is just to make sure that you code in ESM, that's it! During the build, Rollup will eliminate your unused codes automatically.
Tree shaking is enabled in Next. js through webpack automatically.
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
This new version has excellent tree shaking thanks to the updated dependencies. I've tested with both material-ui and mdi-material-ui.
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
