Question

我正在研究React应用程序并使用Webpack创建bundle.js文件。即使我的应用程序非常简单，bundle.js文件大小约为11MB。

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

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

Answer 1

将devtool：'cheap-module-eval-source-map'更改为devtool：webpack config中的'cheap-source-map'。因为webpack -p不接受cheap-module-eval-source-map

Answer 2

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

//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长度 ID
webpack.NoEmitOnErrorsPlugin（）-跳过发射阶段只要编译时有错误。这样可以确保没有发出包含错误的资产

如何减少反应应用程序的webpack构建的bundle大小？

2 个答案: