Optimization 如何优化webpack捆绑包以将代码拆分为较小的文件

我想优化提供的javascript页面。我正在使用Webpack4，并具有以下配置。我使用

webpack-p--mode=production

进行网页包装。当我在生产模式下使用webpack时，仍然会得到大于1MB的文件。为了提高性能，我希望尽可能减小文件大小

module.exports = {
    entry : {
        app: [...
        ],
        vendor: ['react','moment','lodash/core']
    },
    output : {
        filename : '[name].bundle.js',
        path : __dirname + '/docs',
        publicPath : '/'
    },
    optimization: {
         splitChunks: {
           chunks: 'all',
           cacheGroups: {
              vendor: {
                chunks: 'initial',
                name: 'vendor',
                test: 'vendor',
                enforce: true
              },
            }
         },
         runtimeChunk: true,
         minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    },
    module : {
        rules : [  {
            test : /\.js[x]?$/,
            loader : 'babel-loader',
            exclude : {
                  test: /node_modules/,
                  not: [/@babel\/register/],
                },
            options : {
                cacheDirectory : false,
                presets : [ '@babel/preset-react' ],
                plugins : [ '@babel/plugin-transform-runtime' ],
            }
        }, {
            test : /\.css$/,
            use : [ {
                loader : MiniCssExtractPlugin.loader,
                options : {
                    publicPath : __dirname + '/docs/stylesheets',
                    hmr : process.env.NODE_ENV === 'development',
                },
            }, 'css-loader', ]
        }, ...]
    },...
    plugins : [ 
        new HtmlWebpackPlugin({
            template : __dirname + '/src/index.html',
            filename : 'index.html',
            inject : true
        }),...
        new MiniCssExtractPlugin({
            filename : '[name].css',
            chunkFilename : '[id].css',
            ignoreOrder : false, 
        }), 
        new LodashModuleReplacementPlugin
    ],
};

---

您可以使用压缩来进一步减小捆绑包的大小。然后让您的客户选择他们支持的压缩，例如Brotli、gzip

如何优化webpack捆绑包以将代码拆分为较小的文件

实现这一目标的一种方法是将React SPA拆分为多个SPA，每个SPA都有自己的、更小的捆绑包。这些依赖项将被分离到另一个“供应商”捆绑包中，以便重用。还要确保缓存捆绑包以提高性能

---

演示所有这些技术。我是作者。

当然。只需注意，与gzip相比，Brotli可减少约19%的束大小。您可以在

client/dist/

目录中比较大小。