Question

我已经实现了一个webpack项目，其中我使用TerserPlugin作为webpack中的优化程序。当我使用以下命令运行webpack-dev-server时，我在终端中看到，即使在开发模式下，优化器也会发生。

"start": "run-script-os",
"start:win32": "..\\..\\node_modules\\.bin\\webpack-dev-server --env.NODE_ENV=local --mode development --inline --hot --open",
"start:default": "../../node_modules/.bin/webpack-dev-server --env.NODE_ENV=local --mode development --inline --hot --open",

合并输出

[WDS] 92% - chunk asset optimization.
[WDS] 92% - chunk asset optimization (TerserPlugin).
[WDS] 93% - after chunk asset optimization.
[WDS] 93% - after chunk asset optimization (SourceMapDevToolPlugin).
[WDS] 93% - asset optimization.
[WDS] 94% - after asset optimization.
[WDS] 94% - after seal.
[WDS] 95% - emitting.

优化程序选项上的Webpack配置

optimization: {
    minimize: true,
    nodeEnv: 'production',
    minimizer: [
        new TaserJSPlugin({
             terserOptions: {
                 keep_fnames: true
             }
        })
    ]
}

在关闭优化功能的情况下，在开发模式下运行dev-server的正确方法是什么？由于它仅处于开发模式，因此无需缩小代码。

此方法背后的原因是[WDS] 92% - chunk asset optimization (TerserPlugin).步骤需要花费一些时间才能完成，因此我必须等到完成为止。有什么想法吗？

Answer 1

有条件地添加所需的优化。在以下代码中，只有将NODE_ENV设置为production时，TaserJSPlugin才会用于构建。

const isProd = process.env.NODE_ENV === 'production';

...

minimizer: [
    isProd && new TaserJSPlugin({
         terserOptions: {
             keep_fnames: true
         }
    })
].filter(Boolean)
...

请注意，如果数组中存在无效值，则webpack可能会出错。所以我们将其过滤掉。

仅在“产品”模式下运行Webpack优化

1 个答案: