只在“`prod`”模式下运行webpack优化

Question

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

"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",

Conolse输出

[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模式下，所以我不需要缩小代码。

这种方法背后的原因是，[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可能会出错。所以我们过滤掉它。