前言

本文主要探讨在前端项目构建过程中，在生产环境隐藏console和debugger，需要在vite配置文件修改的内容

debugger

JavaScript的 debugger 语句会导致运行中的调试器（Chrome Dev Tools Debugger）将该语句视为自动配置的断点（breakpoint）。当调试器打开时，包含该语句的代码将自动暂停。如果没有打开调试器，则该语句不执行任何操作。从代码中删除这些语句只会阻止调试器在代码运行时自动停止。

console

JavaScript的 console.* API 函数调用，它提供了浏览器控制台调试的API接口。例如console.info() , console.count(), console.log(), console.time(), console.error()等等

问题

项目最近升级到了vue3, vite4之后上线，遇到问题是生产环境需要隐藏console和debugger，因选择的压缩工具而异，在这片文章我们分别介绍esbuild和terser两种方案

Terser 压缩

我们需要更改vite的构建选项
如下：

// vite.config.jsimport { defineConfig } from 'vite'export default defineConfig(({ command, mode }) => {return {// 此处忽略有关plugins, resolve, css, server, define 等配置build: {minify: 'terser',terserOptions: {compress: {drop_console: true,drop_debugger: true}}}}
})

选项说明

build

构建选项，类型是一个对象

build.minify

类型： boolean | ‘terser’ | ‘esbuild’
默认： ‘esbuild’
设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%

build.terserOptions

类型： TerserOptions
传递给 Terser 的更多 minify 选项。

build.terserOptions.compress

类型：object | boolean
默认：{}
传递给压缩的选项
设置为false 可以跳过压缩，传递对象用来确定 compress选项

build.terserOptions.compress.drop_console

类型：boolean | array
默认：false
设置为true可以丢弃对函数 console.* 的调用。如果您只想丢弃一部分 console.* 函数的调用，则可以传递类似 ['log', 'info'] 这样的数组，将仅丢弃 console.log 、console.info

build.terserOptions.compress.drop_debugger

类型：boolean
默认：true
删除 debugger 语句

ESBuild压缩

选项说明

esbuild.build

这是 esbuild 的主要接口。您通常会传递一个或多个入口点（entry point）文件以及各种选项进行处理，然后 esbuild 将结果写回到文件系统。这是一个简单示例：

import * as esbuild from 'esbuild'let result = await esbuild.build({entryPoints: ['app.ts'],bundle: true,outdir: 'dist',
})
console.log(result)

esbuild.build.drop

告诉esbuild在构建之前编辑源代码以删除某些构造

esbuild.build({drop: ['debugger']
})

传递此标志会导致所有的debugger语句从输出中删除，这类似于Terser JavaScript 压缩器 drop_debugger: true 提供的标志

esbuild.build({drop: ['console']
})

传递此标志会导致所有console API 调用从输出中删除。这类似于 Terser JavaScript 压缩器drop_console: true中提供的标志

打包

通过以上步骤修改了vite的构建选项build之后，在命令行输入构建命令

npm run build

部署

将项目根目录的dist文件夹压缩上传至服务器进行部署，看到生产环境的console和debugger被隐藏了

拓展

Terser

JavaScript转换和压缩工具，它对缩短变量名，删除空格和注释，并删除未使用的代码