как оптимизировать пакет веб-пакета для разделения кода на файлы меньшего размера

Question

Я хочу оптимизировать обслуживаемые страницы javascript. я использую webpack 4 и имею следующую конфигурацию. я использую webpack -p --mode=production. когда я в веб-упаковке в производственном режиме, я все еще получаю файлы размером более 1 МБЯ хочу максимально уменьшить размер файла для повышения производительности.

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.

, как оптимизировать пакет веб-пакета для разделения кода на более мелкие файлы

Один из способов достижения этого -разделить React SPA на несколько SPA, каждый со своим собственным и меньшим пакетом. Зависимости будут разделены на другой пакет «вендора», который будет использоваться повторно. Также убедитесь, что пакеты кэшируются для повышения производительности.

Crisp React демонстрирует все эти методы. Я автор.