將 TerserWebpackPlugin webpack 插件的源 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 用於 webpack 配置。

所以你的 TerserPlugin 配置將是：

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

但讓我們回到問題上來。 parallel: true顯示改進啟動和production模式的構建默認情況下執行比“開發”模式構建更重的任務。