Vite中Terser插件基本使用指南
作者:墨鸦_Cormorant
在Vite中使用Terser插件可以对JavaScript代码进行压缩和混淆处理,本文就来详细的介绍一下Terser插件的使用,具有一定的参考价值,感兴趣的可以了解一下
在 Vite 中使用 Terser 插件可以对 JavaScript 代码进行压缩和混淆处理,通常用于生产环境构建优化。
安装依赖
Vite 2.x 版本
npm install @vitejs/plugin-terser --save-dev # 或 yarn add @vitejs/plugin-terser -D
Vite 3.0+ 版本
@vitejs/plugin-terser在 Vite 3.0+ 中已被移除并内置,无需单独安装。如果 Vite 版本 ≥3.0,直接在配置中使用即可,无需安装此插件。
配置方式(Vite 3.0+)
vite.config.ts
export default defineConfig({
build: {
sourcemap: false, // 生产环境是否生成 sourcemap(关闭可减小构建体积)。默认:false
// 指定使用 terser 进行压缩(生产环境默认值),terser构建后文件体积更小。开发环境默认:false(不压缩)
minify: "terser",
// Terser 具体配置
terserOptions: {
// 压缩选项
compress: {
drop_console: true, // 移除所有 console 语句。默认:false
drop_debugger: true, // // 移除 debugger。默认:
// 移除 console.log 等指定方法(与 drop_console 配合使用)默认:[](不特殊处理任何函数)
pure_funcs: ['console.log', 'console.warn'],
collapse_vars: true, // 折叠连续的 var 声明。默认:true
reduce_vars: true, // 提取使用多次但没被定义为变量的静态值。默认:true(提取静态值)
},
// 混淆选项
mangle: {
toplevel: true, // 混淆变量名。默认:false
keep_classnames: false, // 保留类名。默认:false(不强制保留类名,Terser 会智能判断)
keep_fnames: false, // 保留函数名。默认:false(不强制保留函数名)
},
// 输出选项
output: {
comments: false, // 移除所有注释。默认:'some'(保留部分注释,如 @license、@preserve)
beautify: false, // 不保留空格和换行(极致压缩)。默认:false
ascii_only: true, // 为被混淆的变量生成更短的名称。默认:false(不强制 ASCII 编码)
},
},
}
})
关键配置说明:
- minify: 'terser'
- Vite 3.0+ 生产环境默认使用
terser压缩,也可设置为esbuild(更快但压缩率稍低) - 开发环境无需压缩,会自动忽略此配置
- Vite 3.0+ 生产环境默认使用
- compress 压缩选项
drop_console: true:移除所有console相关代码(生产环境常用)drop_debugger: true:移除debugger语句pure_funcs:精确指定需要移除的函数(如只删console.log保留console.error)
- mangle 混淆选项
- 开启后会重命名变量名和函数名,提高代码安全性
- 若需要保留类名或函数名(如使用反射机制时),可将
keep_classnames或keep_fnames设为true
- output 输出选项
comments: false:移除所有注释(包括版权信息,需注意开源协议)beautify: false:关闭美化输出,生成最紧凑的代码
注意事项:
- 配置仅在
production环境生效,开发环境构建不会执行压缩 - 如需部分保留注释,可将
comments设为'some'或自定义函数(参考 Terser 文档) - 过度压缩可能导致源码映射(sourcemap)失效,调试时可临时开启
sourcemap: true
到此这篇关于Vite中Terser插件基本使用指南的文章就介绍到这了,更多相关Vite Terser插件使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
