如何优化 webpack 包以将代码拆分成更小的文件

Question

我想优化正在提供的 javascript 个页面。我正在使用 webpack 4 并具有以下配置。我的 webpack 使用 webpack -p --mode=production。当我在生产模式下使用 webpack 时，我仍然得到大于 1 MB 的文件。我想尽可能地减小文件大小以提高性能。

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

Answer 1

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

how to optimise webpack bundle to split code into smaller files

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

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

如何优化 webpack 包以将代码拆分成更小的文件

how to optimise webpack bundle to split code into smaller files

optimization

webpack

code-splitting