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){}常量折叠12→3、简化条件表达式代码混淆重命名标识符变量/函数/参数降低可读性调试代码移除批量删除console、debugger、alert等二、Vue3 项目集成 TerserVite / WebpackVue3 主流构建工具为Vite默认 esbuild和Vue CLI/WebpackTerser 需手动配置启用。方式 1Vite 项目最常用1. 安装依赖# npmnpminstallterser-D# yarnyarnaddterser-D# pnpmpnpmaddterser-D2. vite.config.js 完整配置import{defineConfig}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig(({mode}){constisProdmodeproductionreturn{plugins:[vue()],build:{// 核心指定压缩器为 terser默认 esbuildminify:terser,sourcemap:!isProd,// 生产环境关闭 SourceMap// Terser 核心配置terserOptions:{// 1. 压缩配置compress:{drop_console:true,// 移除所有 consolelog/warn/error 全删pure_funcs:[console.log,console.info],// 仅移除指定 consoledrop_debugger:true,// 移除 debuggerpasses: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: /^!/ | somebeautify:false// 不格式化压缩为一行}},// 额外优化代码分割、chunk 大小限制chunkSizeWarningLimit:1500}}})方式 2Vue CLI / Webpack 项目1. 安装依赖npminstallterser-webpack-plugin-D2. vue.config.js 配置constTerserPluginrequire(terser-webpack-plugin)module.exports{configureWebpack:config{if(process.env.NODE_ENVproduction){// 配置 Terser 压缩config.optimization.minimizer[newTerserPlugin({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_consolebooleanfalse删除所有console.*pure_funcsarraynull安全删除指定函数无副作用drop_debuggerbooleanfalse删除debuggerpassesnumber1压缩轮数2-3 效果更好unusedbooleantrue删除未引用变量/函数dead_codebooleantrue删除不可达代码collapse_varsbooleantrue合并变量声明2. mangle混淆选项配置项类型默认说明toplevelbooleanfalse混淆顶层变量/函数evalbooleanfalse混淆eval内变量reservedarray[]保留名称不混淆propertiesbooleanfalse混淆对象属性慎用易报错3. format输出选项配置项类型默认说明commentsboolean/regextrue保留/删除注释beautifybooleanfalse是否格式化代码压缩设 false四、Vue3 实战最佳实践生产环境必开drop_console: truedrop_debugger: true保留关键注释comments: /^!/保留/*! ... */版权注释多轮压缩passes: 2体积更小耗时增加可接受保留 Vue 关键字reserved: [defineProps, defineEmits]多进程加速Webpack 开启parallel: true区分环境仅生产环境启用 Terser开发环境保留调试代码五、Terser vs esbuildVite 默认Terser压缩率更高、配置更丰富、支持深度混淆构建慢esbuild速度极快快 20-40 倍、压缩率略低、配置少建议追求极致体积/混淆 → Terser追求构建速度 → esbuild