Question

我想优化所投放的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
    ],
};

Answer 1

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

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

一种实现此目的的方法是将React SPA分成多个SPA，每个SPA都有自己的较小的捆绑包。依赖关系将被分解为另一个“供应商”捆绑包，从而被重用。此外，请确保将分发包缓存起来以提高性能。

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

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

1 个答案: