Vite中Terser插件基本使用指南
在 Vite 中使用 Terser 插件可以對 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue使用canvas實(shí)現(xiàn)圖片壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue使用canvas實(shí)現(xiàn)圖片壓縮上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
vue項(xiàng)目在env文件中設(shè)置的變量無效問題及解決
這篇文章主要介紹了vue項(xiàng)目在env文件中設(shè)置的變量無效問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能(類似輪播圖效果)
這篇文章主要介紹了vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能(類似輪播圖),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
npm安裝vue腳手架報(bào)錯(cuò)警告npm WARN deprecated
安裝vue腳手架報(bào)錯(cuò)可能具體原因比較多,可以根據(jù)報(bào)錯(cuò)信息進(jìn)行排查,本文主要介紹了npm安裝vue腳手架報(bào)錯(cuò)警告npm WARN deprecated,感興趣的可以了解一下2023-11-11
vue template中slot-scope/scope的使用方法
今天小編就為大家分享一篇vue template中slot-scope/scope的使用方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
VUE項(xiàng)目去除input 框值所有空格的操作方法
這篇文章主要介紹了VUE項(xiàng)目去除input 框值所有空格的操作方法,主要包括去除空格的方法、正則和element ui寫法,本文給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10
使用Vite構(gòu)建Vue3項(xiàng)目的流程步驟
在現(xiàn)代前端開發(fā)的世界中,Vue 3 已然成為了一個(gè)備受喜愛的框架,而 Vite 作為一個(gè)新興的構(gòu)建工具,以其極高的效率和簡捷的配置方式席卷了開發(fā)者圈,本文我們將一步一步展示如何使用 Vite 構(gòu)建一個(gè) Vue 3 項(xiàng)目,從創(chuàng)建項(xiàng)目到最后的構(gòu)建階段,需要的朋友可以參考下2024-07-07

