React + Webpack/ Create-React-App: Very Big Bundle Size

Question

I am using create-react-app for my project. My src folder is 600KB in size. Here are the dependencies for the project.

 "devDependencies": { "eslint": "3.12.2", "eslint-config-standard": "6.2.1", "eslint-plugin-promise": "3.4.0", "eslint-plugin-react": "6.8.0", "eslint-plugin-standard": "2.0.1", "react-scripts": "0.8.4", "react-svg-inline": "1.2.0" }, "dependencies": { "axios": "0.15.3", "chart.js": "2.4.0", "clipboard": "1.5.16", "jwt-decode": "^2.1.0", "moment": "2.17.1", "react": "15.4.1", "react-chartjs-2": "2.0.0", "react-copy-to-clipboard": "4.2.3", "react-datepicker": "0.40.0", "react-dom": "15.4.1", "react-dropdown": "1.2.0", "react-highlight": "0.9.0", "react-ladda": "5.0.5", "react-redux": "5.0.1", "react-redux-loading-bar": "2.6.5", "react-router": "3.0.0", "react-router-redux": "4.0.7", "react-select": "1.0.0-rc.3", "react-spinner": "0.2.6", "react-tap-event-plugin": "2.0.1", "redux": "3.6.0", "redux-thunk": "2.1.0", "react-dropzone": "3.11.0" },

When I build, I notice that the generated JS bundle is about 1.7MB. I can't figure it out. Why is the JS bundle so large when the entire source folder is just 600KB including images and other assets?

Have you configured the devtool option in your Webpack configuration? If so, some values for that option may cause the bundle to become quite large, because they include the source map in the bundle itself. — robertklep
– robertklep, Commented Apr 13, 2017 at 8:37
Please run du -sh ./node_modules in the root folder of your project and paste the reported size. — zwippie
– zwippie, Commented Apr 13, 2017 at 8:38
@TobechukwuOnuegbu which value does it have? For production bundling, you should consider one of the values mentioned here: webpack.js.org/configuration/devtool/#for-production — robertklep
– robertklep, Commented Apr 13, 2017 at 8:53
@zwippie that doesn't necessarily have to give a reasonable idea on how large the bundle would be, for one of my projects node_modules contains about 170MB but the bundle size is about 800KB — robertklep
– robertklep, Commented Apr 13, 2017 at 8:55

Gilbert Nwaiwu · Accepted Answer · 2017-04-13 08:57:59Z

I suspect that some of your dependencies are quite hefty.

1) react-highlight: uses highlight.js which may be importing all language support. If you are formatting just one or two languages you can cut out the rest

2) react-chartjs-2: uses chartjs which is quite sizable as well. Not much can be done about it.

3) moment: not too huge but not always needed. If you are just using it for simple date formatting you are better off writing an implementation yourself. Also moment comes with locale support. That will add quite a lot to the bundle size.

I am still speculating here. You can use this excellent tool to analyze the bundle: https://github.com/chrisbateman/webpack-visualizer

Um.. Highlight too. About 20% of the bundle. That's huge. Highlight is importing a number of languages and all I need is "html". Is there a way to remove the languages i don't need from the imported module?

suther · Accepted Answer · 2017-12-22 12:59:45Z

Don't use libraries if you only need to convert an date to your ISO-Lang. For me, I gave moment a try, but it blow up my bundle.js for production from 260K to 508K.

Now I have create an one-liner to convert Date from RFC3339 timestamp to German-Type-Date:

Date(props.value).toLocaleString("de-DE",{year: "numeric", month:"2-digit",day: "2-digit"}).split(",")[0];

props.value, is an RFC3339 timestamp in my case.

You can simulate this with:

new Date( Date.now()).toISOString()

So the whole line becomes:

new Date(new Date( Date.now()).toISOString()).toLocaleString("de-DE",{year: "numeric", month:"2-digit",day: "2-digit"}).split(",")[0]

Collectives™ on Stack Overflow

React + Webpack/ Create-React-App: Very Big Bundle Size

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related