Massive size for both React-dom and Webpack after webpack bundling

Question

Currently working with webpack to bundle my React app. I noticed with the Bundle Analyzer that the two biggest parts are React-dom (955 KB) and mapbox-gl.js (745 KB). Was wondering if this was normal or if someone could give some pointers as to how to reduce the size. (Also currently compressing bundle with new CompressionPlugin()).

Thanks!

Answer 1

Yes, it is normal and will happen when dealing with those two libraries.

I recommend using webpack splitchunks optimization technique and create two chunks one that contains all your code and other chunks containing your vendor js.

Like below will spit your mapbox-gl as separate bundle:

optimization: {
        minimize: true,
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/](mapbox-gl)[\\/]/,
                    name: `${appName}-vendor`,
                    //Apply optimization over both dynamically imported module or non-dynamically imported module.
                    chunks: 'all'
                },
                defaultVendors: {
                    reuseExistingChunk: true,
                    enforce: true
                }
            }
        },
}

and Secondly use CompressionWebpackPlugin to gzip your CSS and JS code:

// new BundleAnalyzerPlugin(),
        new CompressionWebpackPlugin({
            filename: `v${appVersion}/[base].gz[query]`,
            algorithm: "gzip",
            test: /\.(js|css)$/,
            deleteOriginalAssets: true,
        })

Helpful Article(do check for deep learning):

https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

Good Luck!