将 TerserWebpackPlugin webpack 插件的 source map 选项设置为 true 会显着增加 webpack 构建时间

Question

我正在将源地图设置为投入生产。我正在使用 TerserWebpackPlugin 来缩小我的 js（根据 webpack 文档，这似乎是默认的）。这个插件有一个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(),
  ],
});

Answer 1

您有多种选择，具体取决于您的需要。 第一个，输入parallel: true，这样：

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

https://webpack.js.org/plugins/terser-webpack-plugin/#parallel

其他选项是在生产模式下不提供 sourceMap。 您可以有条件地设置sourceMap: true 以获得更高级的解决方案，例如使用getIfUtils for webpack config.

所以您的 TerserPlugin 配置将是：

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

但是让我们回到问题上来。 parallel: true 显示改进一开始的构建，production 模式默认执行比“开发”模式构建更重的任务。