Production build is too large

Question

In my react app created using create-react-app the final production build comes out with a 2.3MB of JS file and 300kb of CSS file (very little CSS).

When I run the command npm run build which uses react-scripts to take build shows that is taking optimised build for production.

I even tried to force it with npm run build --env=production, still the same unoptimised output.

what I feel missing is uglifyjs and `minification of JS files is not being done, As I See my js files are not min.js.

Also final output says it has gzip compressed and it's size is around 400kb of js File ,if that is so how do i serve my files to improve optimisation.

P.S: I also tried some of solution where it suggested to exclude the Generation map to reduce size , but I feel that reduces the overall build size but still not the JS file individually.

Answer 1

If you really want a smaller bundle size you could try code splitting with webpack. For this you want to have control over your webpack configuration and therefore you would have to eject your create-react-app setup.

After this we can configure webpack in such a manner that it will uses code splitting. Code splitting simply produces multiple bundels instead of one big bundle of code with all of its dependencies. We then can on send only the bundle which is necessary for a certain page, and load all of the remaining bundles in the background.

All of this when done properly can significantly lower the initial load time of your react application.

Here you can find how to implement code splitting