Terser.js 详解与 Vue3 项目实战配置

Terser.js 是目前主流的 ES6+ JavaScript 压缩/混淆工具 ，是 UglifyJS 的现代替代方案（UglifyJS 已停止维护），核心作用是减小 JS 体积、移除调试代码、混淆代码逻辑，全面兼容 ES6+ 语法。

一、Terser 核心原理与功能

1. 工作原理

解析（Parse） ：将 JS 代码转为 AST 抽象语法树
压缩（Compress）：优化 AST、删除死代码、简化表达式
混淆（Mangle）：重命名变量/函数名（缩短为单个字符）
生成（Generate）：将 AST 转回压缩后的 JS 代码

2. 核心功能

代码压缩：移除空格、换行、注释、多余分号，精简语法
死代码消除 ：删除未引用变量、不可达代码（if(false){}）
常量折叠 ：1+2 → 3、简化条件表达式
代码混淆：重命名标识符（变量/函数/参数），降低可读性
调试代码移除 ：批量删除 console、debugger、alert 等

二、Vue3 项目集成 Terser（Vite / Webpack）

Vue3 主流构建工具为 Vite （默认 esbuild）和 Vue CLI/Webpack，Terser 需手动配置启用。

方式 1：Vite 项目（最常用）

1. 安装依赖

bash 复制代码

# npm
npm install terser -D
# yarn
yarn add terser -D
# pnpm
pnpm add terser -D

2. vite.config.js 完整配置

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode }) => {
  const isProd = mode === 'production'

  return {
    plugins: [vue()],
    build: {
      // 核心：指定压缩器为 terser（默认 esbuild）
      minify: 'terser',
      sourcemap: !isProd, // 生产环境关闭 SourceMap
      // Terser 核心配置
      terserOptions: {
        // 1. 压缩配置
        compress: {
          drop_console: true, // 移除所有 console（log/warn/error 全删）
          pure_funcs: ['console.log', 'console.info'], // 仅移除指定 console
          drop_debugger: true, // 移除 debugger
          passes: 2, // 多轮压缩（2-3 轮效果最佳）
          unused: true, // 删除未引用变量/函数
          dead_code: true, // 删除不可达代码
          collapse_vars: true, // 合并声明变量
          reduce_vars: true // 优化常量变量
        },
        // 2. 混淆配置
        mangle: {
          toplevel: true, // 混淆顶层变量/函数
          eval: true, // 混淆 eval 内变量
          // 保留关键字（避免破坏 Vue/第三方库）
          reserved: ['Vue', 'defineProps', 'defineEmits']
        },
        // 3. 输出配置
        format: {
          comments: false, // 移除所有注释（含版权）
          // 保留部分注释（如版权）
          // comments: /^!/ | 'some'
          beautify: false // 不格式化（压缩为一行）
        }
      },
      // 额外优化：代码分割、chunk 大小限制
      chunkSizeWarningLimit: 1500
    }
  }
})

方式 2：Vue CLI / Webpack 项目

1. 安装依赖

bash 复制代码

npm install terser-webpack-plugin -D

2. vue.config.js 配置

javascript 复制代码

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 配置 Terser 压缩
      config.optimization.minimizer = [
        new TerserPlugin({
          parallel: true, // 多进程压缩（提升速度）
          extractComments: false, // 不提取注释到单独文件
          terserOptions: {
            compress: {
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log']
            },
            mangle: true,
            format: {
              comments: false
            }
          }
        })
      ]
    }
  }
}

三、Terser 常用配置项详解

1. compress（压缩选项，最常用）

配置项	类型	默认	说明
`drop_console`	boolean	false	删除所有 `console.*`
`pure_funcs`	array	null	安全删除指定函数（无副作用）
`drop_debugger`	boolean	false	删除 `debugger`
`passes`	number	1	压缩轮数（2-3 效果更好）
`unused`	boolean	true	删除未引用变量/函数
`dead_code`	boolean	true	删除不可达代码
`collapse_vars`	boolean	true	合并变量声明

2. mangle（混淆选项）

配置项	类型	默认	说明
`toplevel`	boolean	false	混淆顶层变量/函数
`eval`	boolean	false	混淆 `eval` 内变量
`reserved`	array	\[\]	保留名称（不混淆）
`properties`	boolean	false	混淆对象属性（慎用，易报错）

3. format（输出选项）

配置项	类型	默认	说明
`comments`	boolean/regex	true	保留/删除注释
`beautify`	boolean	false	是否格式化代码（压缩设 false）

四、Vue3 实战最佳实践

生产环境必开 ：drop_console: true + drop_debugger: true
保留关键注释 ：comments: /^!/（保留 /*! ... */ 版权注释）
多轮压缩 ：passes: 2（体积更小，耗时增加可接受）
保留 Vue 关键字 ：reserved: ['defineProps', 'defineEmits']
多进程加速 ：Webpack 开启 parallel: true
区分环境：仅生产环境启用 Terser，开发环境保留调试代码

五、Terser vs esbuild（Vite 默认）

Terser ：压缩率更高、配置更丰富、支持深度混淆；构建慢
esbuild：速度极快（快 20-40 倍）、压缩率略低、配置少

建议：追求极致体积/混淆 → Terser；追求构建速度 → esbuild