Javascript Webpack 4捆绑包优化、代码拆分-React/Redux应用程序

我正在尝试减小bundle.js的大小。以下是我的生产网页配置：

我的应用程序的结构类似于经典的React/Redux应用程序，如下所示：

|-src
|-|-app.js
|-|-行动
|-|-组成部分
|-|-助手
|-|-路由器
|-|-选择器
|-|-贮藏

通过这个webpack配置，我成功地提取了css，并将其拆分为最大250kb的块。我还减小了力矩的大小。 经过所有这些努力，我的入口点仍然是583Kb

我还能做什么？

---

我尝试了延迟加载应用程序的一部分，但没有成功。因此，如果你有React应用程序延迟加载的例子，那就太好了。

我有Webpack6.0.1。基于此，我使用以下插件：

webpack.optimize.ModuleConnectionPlugin（）-连接作用域 将所有模块合并到一个闭包中，并允许代码具有 浏览器中更快的执行时间

webpack.HashedModuleIdsPlugin（）-使哈希值基于 模块的相对路径，生成四个字符串作为 模块id

webpack.optimize.OccurrenceOrderPlugin（）-更改 分配id以获得常用的最小id长度 身份证

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,    
  },
...
}

//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,    
  },
...
}