Tree shaking create-react-app?

reactjs webpack create-react-app rollupjs react-scripts
mllm picture mllm · Aug 2, 2017 · Viewed 11.4k times · Source

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!

Answer

Gary Vernon Grubb picture Gary Vernon Grubb · Oct 4, 2018

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.

Related questions

The create-react-app imports restriction outside of src directory

I am using create-react-app. I am trying to call an image from my public folder from a file inside my src/components. I am receiving this error message. ./src/components/website_index.js Module not found: You attempted to import ../../…

Read More
How to add fonts to create-react-app based projects?

I'm using create-react-app and prefer not to eject. It's not clear where fonts imported via @font-face and loaded locally should go. Namely, I'm loading @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.…

Read More
where is create-react-app webpack config and files?

I create a ReactJS project with the create-react-app package and that worked well, but I cannot find webpack files and configurations. How does react-create-app work with webpack? Where are the webpack configuration files located in a default installation with create-react-app? …

Read More