Javascript 设置TerserWebpackPlugin网页包插件'；s source map选项设置为true将显著增加网页包构建时间

我正在将源地图设置为投入生产。我正在使用TerserWebpackPlugin缩小我的js（根据webpack文档，这似乎是默认的js）。这个插件有一个用于

sourceMap

的配置选项，从文档中可以看出，您必须启用该选项以获得最佳实践（但我不能100%确定，尽管没有它它也可以工作）。问题是，当设置为true时，该选项会额外增加12分钟的构建时间（从大约1:15分钟到13分钟）。额外增加12分钟的构建时间感觉有点太多了，所以我猜当

sourceMap:true

它解析源代码映射时，源代码映射只在用户打开他们的开发工具后才下载，所以我想知道是否需要这样做

我的问题是，这个配置是必需的吗？如果是这样，是否有可能加快构建过程

顺便说一下，这是我的配置：

webpack.common.js

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const WEBPACK_OUTPUT_PATH = path.resolve(`${__dirname}/webpack_output`);
module.exports = {
  entry: { ... },
  output: {
    path: WEBPACK_OUTPUT_PATH,
    filename: '[name]_bundle.js',
  },
  module: { ... },
  plugins: [
    new CleanWebpackPlugin([WEBPACK_OUTPUT_PATH]),
    new webpack.DefinePlugin({
      'global.BUILD_NUMBER': Date.now(),
    }),
  ],
  resolve: {
    alias: {
      ...
    },
    extensions: ['.js', '.jsx', '.json', '.scss', 'css'],
  },
  watchOptions: {
    poll: true,
    ignored: /node_modules/,
  },
};

webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  // NOTE: There are internal webpack plugins that are used when production mode is enabled so they
  // are not defined below. Read more about them here: https://webpack.js.org/plugins/internal-plugins/
  mode: 'production',
  devtool: 'source-map', 
  performance: {
    hints: 'warning',
  },
  output: {
    pathinfo: false,
  },
  optimization: {
    namedModules: false,
    namedChunks: false,
    nodeEnv: 'production', 
    flagIncludedChunks: true,
    occurrenceOrder: true,
    concatenateModules: true,
    splitChunks: {
      hidePathInfo: true,
      minSize: 30000,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
    },
    noEmitOnErrors: true,
    checkWasmTypes: true,
    minimize: true,
  },
  plugins: [
    new TerserPlugin({
      sourceMap: true,
    }),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
});

---

根据您的需要，这里有几个选项。 第一个，把

parallel:true

放在下面：

new TerserPlugin({
  sourceMap: true,
  parallel: true
})

另一个选项是不在生产模式下提供sourceMap。 对于更高级的解决方案，您可以有条件地设置

sourceMap:true

，例如使用

因此，您的TerserPlugin配置为：

new TerserPlugin({
  sourceMap: ifProduction(false, true), // if prod, disable it, otherwise enable
  parallel: true
})

---

但让我们回到问题上来

parallel:true

show为开始和生产改进构建默认情况下执行的任务比“开发”模式构建更重。

parallel默认情况下为true无论如何，“sourceMap”不再是TerserPlugin中的选项，但它会自动检测是否得到要处理的源映射，并将该选项传递给Minify