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

Question

I'm setting source-maps to be on production. I'm using TerserWebpackPlugin to minify my js(which appears to be the default one according to the webpack docs). This plugin has a config option for sourceMap , which from the docs it appears you have to enable for best practices(but I'm not 100% sure although it does work without it). The thing is, when it's set to true the option adds an extra 12ish minutes to build time(from around 1:15 mins to 13ish mins). An extra 12 mins of build time being added feels a bit much so I'm guessing when sourceMap: true it parses the source maps however source maps are only downloaded once a user opens their dev tools so I'm wondering if this is even needed.

My question is, is this config required? And if so, is possible to speed up the build process any?

Here's my configs by the way:

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

You have several options here, depending on what you need. First one, put parallel: true so it's:

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

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

Other option is not to provide sourceMap in production mode. You can conditionally set sourceMap: true for more advanced solutions, such as using getIfUtils for webpack config.

so your TerserPlugin config would be:

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

But let's get back to question. parallel: true show improve the build for the start and production mode is by default heavier task to perform than 'development` mode build.