vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vite Terser插件使用

Vite中Terser插件基本使用指南

作者:墨鸦_Cormorant

在Vite中使用Terser插件可以对JavaScript代码进行压缩和混淆处理,本文就来详细的介绍一下Terser插件的使用,具有一定的参考价值,感兴趣的可以了解一下

在 Vite 中使用 Terser 插件可以对 JavaScript 代码进行压缩和混淆处理,通常用于生产环境构建优化。

安装依赖

配置方式(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 编码)
            },
        },
    }
})

关键配置说明:

  1. minify: 'terser'
    • Vite 3.0+ 生产环境默认使用 terser 压缩,也可设置为 esbuild(更快但压缩率稍低)
    • 开发环境无需压缩,会自动忽略此配置
  2. compress 压缩选项
    • drop_console: true:移除所有 console 相关代码(生产环境常用)
    • drop_debugger: true:移除 debugger 语句
    • pure_funcs:精确指定需要移除的函数(如只删 console.log 保留 console.error
  3. mangle 混淆选项
    • 开启后会重命名变量名和函数名,提高代码安全性
    • 若需要保留类名或函数名(如使用反射机制时),可将 keep_classnameskeep_fnames 设为 true
  4. output 输出选项
    • comments: false:移除所有注释(包括版权信息,需注意开源协议)
    • beautify: false:关闭美化输出,生成最紧凑的代码

注意事项:

到此这篇关于Vite中Terser插件基本使用指南的文章就介绍到这了,更多相关Vite Terser插件使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文