快捷導(dǎo)航

Vite中Terser插件基本使用指南

更新時間：2025年10月28日 09:27:31 作者：墨鴉_Cormorant

在Vite中使用Terser插件可以對JavaScript代碼進行壓縮和混淆處理,本文就來詳細的介紹一下Terser插件的使用,具有一定的參考價值,感興趣的可以了解一下

安裝依賴

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+ 中已被移除并內(nèi)置，無需單獨安裝。如果 Vite 版本 ≥3.0，直接在配置中使用即可，無需安裝此插件。

配置方式（Vite 3.0+）

vite.config.ts

export default defineConfig({
    build: {
        sourcemap: false, // 生產(chǎn)環(huán)境是否生成 sourcemap（關(guān)閉可減小構(gòu)建體積）。默認：false
        
        // 指定使用 terser 進行壓縮（生產(chǎn)環(huán)境默認值），terser構(gòu)建后文件體積更小。開發(fā)環(huán)境默認：false（不壓縮）
        minify: "terser",
        // Terser 具體配置
        terserOptions: {
            // 壓縮選項
            compress: {
                drop_console: true, // 移除所有 console 語句。默認：false
                drop_debugger: true, // // 移除 debugger。默認：
                // 移除 console.log 等指定方法（與 drop_console 配合使用）默認：[]（不特殊處理任何函數(shù)）
                pure_funcs: ['console.log', 'console.warn'],
                collapse_vars: true, // 折疊連續(xù)的 var 聲明。默認：true
                reduce_vars: true, // 提取使用多次但沒被定義為變量的靜態(tài)值。默認：true（提取靜態(tài)值）
            },
            // 混淆選項
            mangle: {
                toplevel: true, // 混淆變量名。默認：false
                keep_classnames: false, // 保留類名。默認：false（不強制保留類名，Terser 會智能判斷）
                keep_fnames: false, // 保留函數(shù)名。默認：false（不強制保留函數(shù)名）
            },
            // 輸出選項
            output: {
                comments: false, // 移除所有注釋。默認：'some'（保留部分注釋，如 @license、@preserve）
                beautify: false, // 不保留空格和換行（極致壓縮）。默認：false
                ascii_only: true, // 為被混淆的變量生成更短的名稱。默認：false（不強制 ASCII 編碼）
            },
        },
    }
})

關(guān)鍵配置說明：

minify: 'terser'
- Vite 3.0+ 生產(chǎn)環(huán)境默認使用 terser 壓縮，也可設(shè)置為 esbuild（更快但壓縮率稍低）
- 開發(fā)環(huán)境無需壓縮，會自動忽略此配置
compress 壓縮選項
- drop_console: true：移除所有 console 相關(guān)代碼（生產(chǎn)環(huán)境常用）
- drop_debugger: true：移除 debugger 語句
- pure_funcs：精確指定需要移除的函數(shù)（如只刪 console.log 保留 console.error）
mangle 混淆選項
- 開啟后會重命名變量名和函數(shù)名，提高代碼安全性
- 若需要保留類名或函數(shù)名（如使用反射機制時），可將 keep_classnames 或 keep_fnames 設(shè)為 true
output 輸出選項
- comments: false：移除所有注釋（包括版權(quán)信息，需注意開源協(xié)議）
- beautify: false：關(guān)閉美化輸出，生成最緊湊的代碼