Webpack 4包优化，代码拆分- React/Redux应用程序

Question

我正在努力缩小我的bundle.js的大小。这是我的webpack的生产配置：

module.exports = () => {
  return {
    entry: ['babel-polyfill', './src/app.js'],
    output: {
      path: path.join(__dirname, 'public', 'dist'),
      filename: 'bundle.js',
      chunkFilename: '[name].js'
    },
    optimization: {
      runtimeChunk: true,
      splitChunks: {
      chunks: 'all',
      minSize: 50000,
      maxSize: 250000,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          priority: -10
        },
      }
    },
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {
          parse: {
            ecma: 8,
          },
          compress: {
            ecma: 5,
            warnings: false,
            comparisons: false,
          },
          mangle: {
            safari10: true,
          },
          output: {
            ecma: 5,
            comments: false,
            ascii_only: true,
          },
        },
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
    },
    module: {
      rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },{
        test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader']
      }]
    }, 
    plugins: [
    new webpack.DefinePlugin({/*env variables*/}),
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),
    new HtmlWebpackPlugin({ template: 'index.ejs', filename: path.join(__dirname, 'public', 'index.html')}),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ],
    devtool: 'source-map'
  };
};

我的应用程序的结构就像一个典型的React/Redux应用程序：

|-src
|-|-app.js
|-|-actions
|-|-components
|-|-helpers
|-|-routers
|-|-selectors
|-|-store

使用这个webpack配置，我成功地将css提取出来，并分割成最大250 of的块。我也缩小了瞬间的大小。经过这么多努力，我的切入点仍然是583 my。

​

​

我还能做什么？我尝试了延迟加载应用程序的一部分，但是它没有工作。所以，如果你有一个延迟加载一个反应应用程序的例子，那就太好了。

Answer 1

我有webpack 6.0.1。基于文档，我使用了以下插件：

1. webpack.optimize.ModuleConcatenationPlugin() -将所有模块的范围连接为一个闭包，并允许代码在浏览器中具有更快的执行时间
2. webpack.HashedModuleIdsPlugin() -使散列基于模块的相对路径，生成一个四个字符串作为模块id
3. webpack.optimize.OccurrenceOrderPlugin() -更改id的分布以获得常用id的最小id长度
4. webpack.NoEmitOnErrorsPlugin() -编译时出现错误时跳过发射阶段。这将确保不发出包含错误的资产。

我对webpack.config.js进行了测试，使用了以下配置思想。您可以根据以下设置测试您的配置：

//webpack.config.js
module.exports = {
  ...
  devtool: 'cheap-module-source-map',
  ...
  plugins : [
    ...
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.HashedModuleIdsPlugin({
      hashFunction: 'sha256',
      hashDigest: 'hex',
      hashDigestLength: 4
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],

  ...

  optimization: {
    namedModules: false,
    namedChunks: false,
    nodeEnv: 'production',
    flagIncludedChunks: true,
    occurrenceOrder: true,
    sideEffects: true,
    usedExports: true,
    concatenateModules: true,
    splitChunks: {
      cacheGroups: {
        commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all'
        }
      },
      minSize: 30000,
      maxAsyncRequests: 5,
      maxAsyncRequests: 3,      
    },
    noEmitOnErrors: true,
    minimize: true, 
    minimizer: [
      // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      })
    ],
    removeAvailableModules: true,
    removeEmptyChunks: true,
    mergeDuplicateChunks: true,    
  },
...
}