如何减少响应应用程序的 webpack 构建的包大小？答案

【问题标题】：How to reduce bundle size of the webpack build for a react application?如何减少响应应用程序的 webpack 构建的包大小？
【发布时间】：2016-04-19 10:01:02
【问题描述】：

我正在开发一个 React 应用程序并使用 Webpack 创建 bundle.js 文件。尽管我的应用程序非常简单，但 bundle.js 文件大小约为 11MB。

当我使用https://webpack.github.io/analyse/ 分析捆绑文件时，bundle.js 中包含了 1000 多个包。其中一些包在 package.json 文件的 devDependencies 部分中定义。

因此，我正在寻找以下问题的答案。有没有办法减少 webpack 编译的文件大小？ webpack 是否在最终的 bundle.js 中包含 devDependencies 模块？

【问题讨论】：

这取决于你的 webpack.config 文件，你能为我们添加/显示它吗？
而且你的 package.json 中似乎有很多包。你都需要吗？
感谢您的回复。解决了。将 webpack 配置文件中的 devtool: 'cheap-module-eval-source-map' 更改为 devtool: 'cheap-source-map' 现在为 1MB。

标签： reactjs ecmascript-6 webpack webpack-dev-server

【解决方案1】：

在 webpack 配置中将 devtool: 'cheap-module-eval-source-map' 更改为 devtool: 'cheap-source-map'。因为 webpack -p 不接受cheap-module-eval-source-map

【讨论】：

【解决方案2】：

我有 webpack 6.0.1。除了通常的 webpack.config.js 设置之外，我还可以建议以下优化模型（webpack.config.js 生产模式）。更多信息请参见底部与插件相关的optimization、mode configuration 和 cmets：

//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.optimize.ModuleConcatenationPlugin() - 连接范围将所有模块合并到一个闭包中，并允许您的代码具有在浏览器中更快的执行时间
webpack.HashedModuleIdsPlugin() - 导致哈希基于模块的相对路径，生成四个字符串为模块 ID
webpack.optimize.OccurrenceOrderPlugin() - 改变 id 的分布以获得经常使用的最小 id 长度身份证
webpack.NoEmitOnErrorsPlugin() - 跳过发射阶段每当编译时出现错误。这确保没有发出包含错误的资产

【讨论】：