webpack 打包后 React-dom 和 Webpack 的体积都很大

Question

目前正在使用 webpack 捆绑我的 React 应用程序。我注意到 Bundle Analyzer 的两个最大部分是 React-dom (955 KB) 和 mapbox-gl.js (745 KB)。想知道这是否正常，或者是否有人可以就如何减小尺寸给出一些指示。（目前还使用新的 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 压缩您的 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

祝你好运！

webpack 打包后 React-dom 和 Webpack 的体积都很大

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

webpack

mapbox-gl

mapbox-gl-js

react-dom