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 提取出来并分成最大 250kb 的块。我还减小了矩的大小。 经过所有这些努力，我的入口点仍然是 583Kb。

我还能做什么？ 我尝试延迟加载应用程序的一部分，但它不起作用。因此，如果您有 React 应用的延迟加载示例，那就太好了。

Answer 1

我有 webpack 6.0.1。基于documentation，我使用以下插件：

1. webpack.optimize.ModuleConcatenationPlugin() - 连接范围 将所有模块合并到一个闭包中，并允许您的代码具有 在浏览器中更快的执行时间
2. webpack.HashedModuleIdsPlugin() - 导致哈希基于 模块的相对路径，生成四个字符串为 模块 ID
3. webpack.optimize.OccurrenceOrderPlugin() - 改变 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,    
  },
...
}