Vite中Terser插件基本使用指南

 更新时间:2025年10月28日 09:27:31   作者:墨鸦_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 编码)
            },
        },
    }
})

关键配置说明:

  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:关闭美化输出,生成最紧凑的代码

注意事项:

  • 配置仅在 production 环境生效,开发环境构建不会执行压缩
  • 如需部分保留注释,可将 comments 设为 'some' 或自定义函数(参考 Terser 文档
  • 过度压缩可能导致源码映射(sourcemap)失效,调试时可临时开启 sourcemap: true

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

相关文章

  • Vue解决ajax跨域的问题

    Vue解决ajax跨域的问题

    这篇文章主要介绍了Vue解决ajax跨域的问题,跨域请求:是指协议名、主机名、端口号三者有任何一个不一样,而且跨域请求是请求发出去了,服务器接收并返回了结果,只是浏览器没有接收响应结果。感兴趣的同学可以参考阅读
    2023-04-04
  • Vue组件实现卡片动画倒计时示例详解

    Vue组件实现卡片动画倒计时示例详解

    这篇文章主要介绍了Vue组件实现卡片动画倒计时示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue3+vite+ts使用require.context问题

    vue3+vite+ts使用require.context问题

    这篇文章主要介绍了vue3+vite+ts使用require.context问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue实现添加数据到二维数组并显示

    Vue实现添加数据到二维数组并显示

    这篇文章主要介绍了Vue实现添加数据到二维数组并显示方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3中的 $attrs 与 Attributes 继承

    vue3中的 $attrs 与 Attributes 继承

    这篇文章主要介绍了vue3中的 $attrs 与 Attributes 继承的相关资料,首先介绍了什么是Attributes 继承,结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • Vue项目数据动态过滤实践及实现思路

    Vue项目数据动态过滤实践及实现思路

    这篇文章主要介绍了Vue项目数据动态过滤实践,,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue项目中按钮防抖处理实现过程

    vue项目中按钮防抖处理实现过程

    这篇文章主要给大家介绍了关于vue项目中按钮防抖处理实现的相关资料,在项目开发中相必大家时常会遇到按钮重复点击后引起事件重复提交的问题,需要的朋友可以参考下
    2023-08-08
  • vue动态加载SVG文件并修改节点数据的操作代码

    vue动态加载SVG文件并修改节点数据的操作代码

    这篇文章主要介绍了vue动态加载SVG文件并修改节点数据的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • vue2 利用echarts 单独绘制省份的步骤

    vue2 利用echarts 单独绘制省份的步骤

    这篇文章主要介绍了vue2 利用echarts 单独绘制省份,首先引入所需要的第三方模块,通过示例代码给大家介绍的非常详细,文章末尾给大家补充介绍了vue2.x结合echarts2实现显示具体省份热力图的问题,需要的朋友可以参考下
    2022-01-01
  • 前端vue实现的h5页面接入微信支付流程(jsapi方式)

    前端vue实现的h5页面接入微信支付流程(jsapi方式)

    vue实现微信支付有三种方式,第一种方式是PC端支付,第二种方式是H5支付,第三种方式是微信公众号支付,这篇文章主要给大家介绍了关于前端vue实现的h5页面接入微信支付流程,文中介绍的方法是利用jsapi方式,通过代码将实现的方法介绍的非常详细,需要的朋友可以参考下
    2024-01-01

最新评论