Установка в качестве значения параметра карты источника плагина веб-пакета TerserWebpackPlugin значения true значительно увеличивает время сборки веб-пакета.

Question

Я устанавливаю исходные карты для производства. Я использую TerserWebpackPlugin, чтобы минимизировать мой js (который, по словам документов веб-пакета, является стандартным). Этот плагин имеет параметр конфигурации для sourceMap, который, по-видимому, из документации следует включить для передового опыта (но я не уверен на 100%, хотя он работает без него). Дело в том, что когда установлено значение true, опция добавляет дополнительные 12i sh минут к времени построения (от 1:15 до 13i sh минут). Дополнительные 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 .прод. 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 для конфигурации веб-пакета.

, чтобы ваша конфигурация TerserPlugin была:

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

Но давайте вернитесь к вопросу. parallel: true show улучшает сборку для запуска, и режим production по умолчанию является более сложной задачей, чем сборка в режиме 'development'.