Vue CLI 3 使用 Terser 删除 console.log 和代码注释

Posted 2023-02-22

【中文标题】Vue CLI 3 使用 Terser 删除 console.log 和代码注释

【英文标题】：Vue CLI 3 remove console.log and code comments with Terser

【发布时间】：2020-02-07 00:17:32

【问题描述】：

我正在使用 VUE CLI 3，我需要从构建的产品中删除 console.log 和 code cmets。这是我的Terser 设置：

webpack.config.js 在 src 文件夹中

    module.exports = 
mode: 'production',
  optimization: 
    minimize: true,
    minimizer: [
      new TerserPlugin(
        terserOptions: 
          ecma: undefined,
          warnings: false,
          parse: ,
          compress: drop_debugger,
          mangle: true, // Note `mangle.properties` is `false` by default.
          module: false,
          output: null,
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: false,
          safari10: false,
        ,
      ),
    ],
  ,
;

我的生产工作流程：运行npm run build -> cd dist -> npm run serve

生产版本仍会输出所有 console.log 语句并显示代码 cmets (<!-- -->)。 我需要更改哪些内容才能删除它们？

【问题讨论】：

尝试：terserOptions: ecma: 6, compress: drop_console: true , 输出: cmets: false, beautify: false

@JeffProd 刚刚尝试过，但我收到了相同的结果。 console.log 和 cmets 在输出中仍然可见。有什么想法吗？

npm run serve 运行开发构建，不是吗？ Terser 仅适用于生产版本。

@madflow 这可以解释很多。我正在 dist 构建上运行 npm run build -> npm run serve。在分发之前测试 dist 构建的正确命令是什么？ （npm run build 正在设置 生产模式 对吗？）

答案如下：)

【参考方案1】：

首先：确保您正确配置Terser：

terserOptions: 
    ecma: 6,
    compress:  drop_console: true ,
    output:  comments: false, beautify: false 

npm run serve

通常是以下的快捷方式：

vue-cli-service

vue-cli-service --help

  Usage: vue-cli-service <command> [options]

  Commands:

    serve     start development server
    build     build for production
    inspect   inspect internal webpack config
    lint      lint and fix source files

所以当您的工作流程是上面提到的npm run build -> cd dist -> npm run serve 时，您实际上是在启动开发服务器，它不应用 Terser。

为了运行生产版本，您可以使用任何能够提供静态内容的webserver：

NodeJs 示例：

npm install -g serve
serve -s dist

或

npm install -g node-static
static dist

【讨论】：

感谢您的回答和解释。我现在正在使用 serve -s dist 运行构建，但日志和 cmets 仍在构建中 - 我的服务器上上传的构建也是如此。我打开了一个新问题来找到这个问题的根源。链接：***.com/questions/58328991/…

我更新了我的答案 - 当我像上面在 cmets 中提到的那样添加 ecma: 6 时，它对我有用。知道会很有趣...为什么...@Tom