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

【问题标题】：how to optimise webpack bundle to split code into smaller files如何优化 webpack 包以将代码拆分为更小的文件
【发布时间】：2019-10-25 11:08:02
【问题描述】：

我想优化所提供的 javascript 页面。我正在使用 webpack 4 并具有以下配置。我使用webpack -p --mode=production webpack。当我在生产模式下使用 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
    ],
};

【问题讨论】：

标签： optimization webpack code-splitting

【解决方案1】：

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

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

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

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

【讨论】：

当然。请注意，与 gzip 相比，Brotli 减少了约 19% 的包大小。您可以在client/dist/ 目录中比较大小。