Question

我正在尝试创建我的代码的生成版本并创建了一个webpack.production.config.js文件。当我运行'webpack -p'时，我的bundle.js文件大小减少了，但我的bundle.js.map文件大小增加了。这是代码和各自的输出：

webpack.config.js：

const path = require("path"); //eslint-disable-line
const webpack = require('webpack');


module.exports = {
  context: __dirname,
  entry: "./frontend/index.jsx",
  output: {
    path: path.join(__dirname, 'assets', 'build'),
    filename: "bundle.js",
    devtoolModuleFilenameTemplate: '[resourcePath]',
    devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]'
  },
  externals: {
    'cheerio': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true
  },
  module: {
    loaders: [
      {
        test: [/\.jsx?$/, /\.js?$/],
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      }
    ]
  },
  devtool: 'source-map',
  eslint: {
    configFile: './.eslintrc'
  },
  resolve: {
    extensions: ["", ".js", ".jsx" ]
  },
  watchOptions: {
    aggregateTimeout: 500,
    poll: 2000,
    ignored: /node_modules/
 }
};



11:22 $ webpack
Hash: 3eaf0c4ed8964deb6866
Version: webpack 1.13.3
Time: 5805ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  2.16 MB       0  [emitted]  main
bundle.js.map  2.53 MB       0  [emitted]  main
    + 484 hidden modules

webpack.production.config.js：

const path = require("path"); //eslint-disable-line
const webpack = require('webpack');


module.exports = {
  context: __dirname,
  entry: "./frontend/index.jsx",
  output: {
    path: path.join(__dirname, 'assets', 'build'),
    filename: "bundle.js",
    devtoolModuleFilenameTemplate: '[resourcePath]',
    devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]'
  },
  externals: {
    'cheerio': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true
  },
  module: {
    loaders: [
      {
        test: [/\.jsx?$/, /\.js?$/],
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true
      }
    })
  ],
  devtool: 'cheap-module-source-map',
  resolve: {
    extensions: ["", ".js", ".jsx" ]
  }
};


11:19 $ webpack -p
Hash: c40d4a49c049e8b5a525
Version: webpack 1.13.3
Time: 20990ms
        Asset     Size  Chunks             Chunk Names
    bundle.js   805 kB       0  [emitted]  main
bundle.js.map  5.55 MB       0  [emitted]  main
    + 484 hidden modules

任何想法为什么bundle.js.map增加如此显着，如果这是一个问题？我也从Uglify.js收到一堆警告，我被告知要忽略。

感谢。

Answer 1

我不认为这是一个问题，因为source-map仅用于调试。它们也仅在devtools打开时加载。 Performance impact of using css / javascript source-maps in production

Answer 2

简而言之，最好在Webpack.config.js中添加几个插件（请参阅最后的描述）并使用“优化：{...}”部分

我有webpack 6.0.1。根据我测试过的documentation，对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.optimize.ModuleConcatenationPlugin（）-合并作用域将所有模块合并到一个闭包中，并允许您的代码具有在浏览器中更快的执行时间
webpack.HashedModuleIdsPlugin（）-导致哈希基于模块的相对路径，生成四个字符串作为模块ID
webpack.optimize.OccurrenceOrderPlugin（）-更改 id的分布以获得经常使用的最小id长度 ID
webpack.NoEmitOnErrorsPlugin（）-跳过发射阶段只要编译时有错误。这样可以确保没有发出包含错误的资产

生产webpack增加了bundle.js.map

2 个答案: