How to minimize the bundle size of a react app?

user_14970503 0
Viewed 271

I am using the create-react-app toolchain to get started. Everything works fine but its build size is a little over the top. In my app, there are 8 components and 2 small contexts measuring 60kb total. So all code in my src folder is 60kb. But with npm run build it generated 900KB app chunk.

Then I saw a video on youtube where the guy decreased his 700 kb chunk to 100 kb using webpack config. He didn't explain his webpack config much. What he said though is that react-scripts build includes lots of debugging tools that are not required in production. This command in particular did the magic


        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production'),
        }),

I have tried several methods to reduce the size of my chunk like code splitting using react.lazy() but that also didn't make much difference. Can someone suggest a generic webpack config for the production build using above command.

webpack reactjs
1 Answers

The production build included in CRA removes those extra debugging tools and is optimized for production.

user_90284290
Related