CODEWITHSUNDEEP
reactjswebpackcreate-react-approllupjsreact-scripts
mllm
mllm

Reputation: 17448

Tree shaking create-react-app?

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!

Upvotes: 28

Views: 22414

Answers (3)

Jürgen Brandstetter
Jürgen Brandstetter

Reputation: 7324

In case you use typscript, my fix was to change "module": "commonjs", to "module": "ESNext", in all tsconfig.json files.

Upvotes: 0

mikebridge
mikebridge

Reputation: 4575

We rewrote our imports for material-ui in our create-react-app-typescript project by changing them from this style:

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

Upvotes: 7

Gary Vernon Grubb
Gary Vernon Grubb

Reputation: 11205

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.

Upvotes: 28

Related Questions