Web包绑定后，React dom和Web包的大小都非常大

Question

目前正在使用webpack捆绑我的React应用程序。我注意到Bundle分析器中最大的两个部分是React-dom（955kb）和mapbox-gl.js（745kb）。我想知道这是否正常，或者是否有人可以给出一些关于如何减小尺寸的建议。（当前还使用新的CompressionPlugin（）压缩捆绑包）。

谢谢

Answer 1

是的，这是正常的，在处理这两个库时会发生。

我建议使用webpack splitchunks优化技术，创建两个块，一个包含所有代码，另一个包含供应商js。

像下面将吐你的mapbox gl作为单独的捆绑包：

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
                }
            }
        },
}

其次使用CompressionWebPackPlugin gzip你的CSS和JS代码：

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

有用的文章（请检查深入学习）：

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

祝你好运！