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

Question

我正在将源映射设置为处于生产状态。我正在使用TerserWebpackPlugin来缩小我的js(根据webpack文档，这似乎是默认的js(。这个插件有一个sourceMap的配置选项，从文档中可以看出，你必须启用它才能获得最佳实践(但我不能100%确定，尽管没有它它确实可以工作(。问题是，当它设置为真时，该选项会增加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模式比"开发"模式的构建要执行更重的任务。