Vite中Terser插件基本使用指南
在 Vite 中使用 Terser 插件可以對(duì) JavaScript 代碼進(jìn)行壓縮和混淆處理,通常用于生產(chǎn)環(huán)境構(gòu)建優(yōu)化。
安裝依賴
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)置,無需單獨(dú)安裝。如果 Vite 版本 ≥3.0,直接在配置中使用即可,無需安裝此插件。
配置方式(Vite 3.0+)
vite.config.ts
export default defineConfig({
build: {
sourcemap: false, // 生產(chǎn)環(huán)境是否生成 sourcemap(關(guān)閉可減小構(gòu)建體積)。默認(rèn):false
// 指定使用 terser 進(jìn)行壓縮(生產(chǎn)環(huán)境默認(rèn)值),terser構(gòu)建后文件體積更小。開發(fā)環(huán)境默認(rèn):false(不壓縮)
minify: "terser",
// Terser 具體配置
terserOptions: {
// 壓縮選項(xiàng)
compress: {
drop_console: true, // 移除所有 console 語句。默認(rèn):false
drop_debugger: true, // // 移除 debugger。默認(rèn):
// 移除 console.log 等指定方法(與 drop_console 配合使用)默認(rèn):[](不特殊處理任何函數(shù))
pure_funcs: ['console.log', 'console.warn'],
collapse_vars: true, // 折疊連續(xù)的 var 聲明。默認(rèn):true
reduce_vars: true, // 提取使用多次但沒被定義為變量的靜態(tài)值。默認(rèn):true(提取靜態(tài)值)
},
// 混淆選項(xiàng)
mangle: {
toplevel: true, // 混淆變量名。默認(rèn):false
keep_classnames: false, // 保留類名。默認(rèn):false(不強(qiáng)制保留類名,Terser 會(huì)智能判斷)
keep_fnames: false, // 保留函數(shù)名。默認(rèn):false(不強(qiáng)制保留函數(shù)名)
},
// 輸出選項(xiàng)
output: {
comments: false, // 移除所有注釋。默認(rèn):'some'(保留部分注釋,如 @license、@preserve)
beautify: false, // 不保留空格和換行(極致壓縮)。默認(rèn):false
ascii_only: true, // 為被混淆的變量生成更短的名稱。默認(rèn):false(不強(qiáng)制 ASCII 編碼)
},
},
}
})
關(guān)鍵配置說明:
- minify: 'terser'
- Vite 3.0+ 生產(chǎn)環(huán)境默認(rèn)使用
terser壓縮,也可設(shè)置為esbuild(更快但壓縮率稍低) - 開發(fā)環(huán)境無需壓縮,會(huì)自動(dòng)忽略此配置
- Vite 3.0+ 生產(chǎn)環(huán)境默認(rèn)使用
- compress 壓縮選項(xiàng)
drop_console: true:移除所有console相關(guān)代碼(生產(chǎn)環(huán)境常用)drop_debugger: true:移除debugger語句pure_funcs:精確指定需要移除的函數(shù)(如只刪console.log保留console.error)
- mangle 混淆選項(xiàng)
- 開啟后會(huì)重命名變量名和函數(shù)名,提高代碼安全性
- 若需要保留類名或函數(shù)名(如使用反射機(jī)制時(shí)),可將
keep_classnames或keep_fnames設(shè)為true
- output 輸出選項(xiàng)
comments: false:移除所有注釋(包括版權(quán)信息,需注意開源協(xié)議)beautify: false:關(guān)閉美化輸出,生成最緊湊的代碼
注意事項(xiàng):
- 配置僅在
production環(huán)境生效,開發(fā)環(huán)境構(gòu)建不會(huì)執(zhí)行壓縮 - 如需部分保留注釋,可將
comments設(shè)為'some'或自定義函數(shù)(參考 Terser 文檔) - 過度壓縮可能導(dǎo)致源碼映射(sourcemap)失效,調(diào)試時(shí)可臨時(shí)開啟
sourcemap: true
到此這篇關(guān)于Vite中Terser插件基本使用指南的文章就介紹到這了,更多相關(guān)Vite Terser插件使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue組件實(shí)現(xiàn)卡片動(dòng)畫倒計(jì)時(shí)示例詳解
這篇文章主要介紹了Vue組件實(shí)現(xiàn)卡片動(dòng)畫倒計(jì)時(shí)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
vue3+vite+ts使用require.context問題
這篇文章主要介紹了vue3+vite+ts使用require.context問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
Vue實(shí)現(xiàn)添加數(shù)據(jù)到二維數(shù)組并顯示
這篇文章主要介紹了Vue實(shí)現(xiàn)添加數(shù)據(jù)到二維數(shù)組并顯示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過濾實(shí)踐及實(shí)現(xiàn)思路
這篇文章主要介紹了Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過濾實(shí)踐,,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)的相關(guān)資料,在項(xiàng)目開發(fā)中相必大家時(shí)常會(huì)遇到按鈕重復(fù)點(diǎn)擊后引起事件重復(fù)提交的問題,需要的朋友可以參考下2023-08-08
vue動(dòng)態(tài)加載SVG文件并修改節(jié)點(diǎn)數(shù)據(jù)的操作代碼
這篇文章主要介紹了vue動(dòng)態(tài)加載SVG文件并修改節(jié)點(diǎn)數(shù)據(jù)的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
前端vue實(shí)現(xiàn)的h5頁面接入微信支付流程(jsapi方式)
vue實(shí)現(xiàn)微信支付有三種方式,第一種方式是PC端支付,第二種方式是H5支付,第三種方式是微信公眾號(hào)支付,這篇文章主要給大家介紹了關(guān)于前端vue實(shí)現(xiàn)的h5頁面接入微信支付流程,文中介紹的方法是利用jsapi方式,通過代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01

