I was getting my head around optimizing the ReactJS + Wepback application from the performance perspective and came across some useful advice on reducing the JS code in the end bundle. My goal is to, perhaps adjust chunks so that the maximum limit was about 100kb or close to that (if it's generally possible). I did find some tips on Stackoverflow indeed, tho those answers still get me into the huge final bundle size.

Is anyone aware of some resources I can look up directly on improving the vendors and custom code load, or could you please assist in improving the optimisation code?

optimization: {
        splitChunks: {
            chunks: 'async',
            minSize: 20000,
            minRemainingSize: 0,
            minChunks: 3,
            maxAsyncRequests: 30,
            maxInitialRequests: 30,
            enforceSizeThreshold: 50000,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                        const packageName = module.context
                            .match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                        return `npm.${packageName.replace('@', '')}`;
                    }
                },
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true
                },
                react: {
                    test: /[\\/]node_modules[\\/](react)[\\/]/,
                    name: 'react',
                    chunks: 'all'
                },
                react_dom: {
                    test: /[\\/]node_modules[\\/](react-dom)[\\/]/,
                    name: 'react-dom',
                    chunks: 'all'
                },
                bootstrap: {
                    test: /[\\/]node_modules[\\/](bootstrap)[\\/]/,
                    name: 'bootstrap',
                    chunks: 'all'
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    },