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使用canvas实现图片压缩上传

    Vue使用canvas实现图片压缩上传

    这篇文章主要为大家详细介绍了Vue使用canvas实现图片压缩上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue项目在env文件中设置的变量无效问题及解决

    vue项目在env文件中设置的变量无效问题及解决

    这篇文章主要介绍了vue项目在env文件中设置的变量无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue使用自定义指令实现拖拽

    vue使用自定义指令实现拖拽

    这篇文章主要为大家详细介绍了vue使用自定义指令实现拖拽,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 如何在vue中使用kindeditor富文本编辑器

    如何在vue中使用kindeditor富文本编辑器

    这篇文章主要介绍了vue中使用kindeditor富文本编辑器的方法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)

    vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)

    这篇文章主要介绍了vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • npm安装vue脚手架报错警告npm WARN deprecated

    npm安装vue脚手架报错警告npm WARN deprecated

    安装vue脚手架报错可能具体原因比较多,可以根据报错信息进行排查,本文主要介绍了npm安装vue脚手架报错警告npm WARN deprecated,感兴趣的可以了解一下
    2023-11-11
  • vue3实现ai聊天对话框功能

    vue3实现ai聊天对话框功能

    这篇文章主要介绍了vue3实现ai聊天对话框功能,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-12-12
  • vue template中slot-scope/scope的使用方法

    vue template中slot-scope/scope的使用方法

    今天小编就为大家分享一篇vue template中slot-scope/scope的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • VUE项目去除input 框值所有空格的操作方法

    VUE项目去除input 框值所有空格的操作方法

    这篇文章主要介绍了VUE项目去除input 框值所有空格的操作方法,主要包括去除空格的方法、正则和element ui写法,本文给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • 使用Vite构建Vue3项目的流程步骤

    使用Vite构建Vue3项目的流程步骤

    在现代前端开发的世界中,Vue 3 已然成为了一个备受喜爱的框架,而 Vite 作为一个新兴的构建工具,以其极高的效率和简捷的配置方式席卷了开发者圈,本文我们将一步一步展示如何使用 Vite 构建一个 Vue 3 项目,从创建项目到最后的构建阶段,需要的朋友可以参考下
    2024-07-07

最新评论