亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vite中Terser插件基本使用指南

 更新時(shí)間:2025年10月28日 09:27:31   作者:墨鴉_Cormorant  
在Vite中使用Terser插件可以對(duì)JavaScript代碼進(jìn)行壓縮和混淆處理,本文就來詳細(xì)的介紹一下Terser插件的使用,具有一定的參考價(jià)值,感興趣的可以了解一下

在 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)鍵配置說明:

  1. minify: 'terser'
    • Vite 3.0+ 生產(chǎn)環(huán)境默認(rèn)使用 terser 壓縮,也可設(shè)置為 esbuild(更快但壓縮率稍低)
    • 開發(fā)環(huán)境無需壓縮,會(huì)自動(dòng)忽略此配置
  2. compress 壓縮選項(xiàng)
    • drop_console: true:移除所有 console 相關(guān)代碼(生產(chǎn)環(huán)境常用)
    • drop_debugger: true:移除 debugger 語句
    • pure_funcs:精確指定需要移除的函數(shù)(如只刪 console.log 保留 console.error
  3. mangle 混淆選項(xiàng)
    • 開啟后會(huì)重命名變量名和函數(shù)名,提高代碼安全性
    • 若需要保留類名或函數(shù)名(如使用反射機(jī)制時(shí)),可將 keep_classnameskeep_fnames 設(shè)為 true
  4. 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解決ajax跨域的問題

    Vue解決ajax跨域的問題

    這篇文章主要介紹了Vue解決ajax跨域的問題,跨域請(qǐng)求:是指協(xié)議名、主機(jī)名、端口號(hào)三者有任何一個(gè)不一樣,而且跨域請(qǐng)求是請(qǐng)求發(fā)出去了,服務(wù)器接收并返回了結(jié)果,只是瀏覽器沒有接收響應(yīng)結(jié)果。感興趣的同學(xué)可以參考閱讀
    2023-04-04
  • Vue組件實(shí)現(xiàn)卡片動(dòng)畫倒計(jì)時(shí)示例詳解

    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問題

    這篇文章主要介紹了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ù)組并顯示

    這篇文章主要介紹了Vue實(shí)現(xiàn)添加數(shù)據(jù)到二維數(shù)組并顯示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue3中的 $attrs 與 Attributes 繼承

    vue3中的 $attrs 與 Attributes 繼承

    這篇文章主要介紹了vue3中的 $attrs 與 Attributes 繼承的相關(guān)資料,首先介紹了什么是Attributes 繼承,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-02-02
  • Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過濾實(shí)踐及實(shí)現(xiàn)思路

    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)過程

    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ù)的操作代碼

    這篇文章主要介紹了vue動(dòng)態(tài)加載SVG文件并修改節(jié)點(diǎn)數(shù)據(jù)的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-08-08
  • vue2?利用echarts?單獨(dú)繪制省份的步驟

    vue2?利用echarts?單獨(dú)繪制省份的步驟

    這篇文章主要介紹了vue2?利用echarts?單獨(dú)繪制省份,首先引入所需要的第三方模塊,通過示例代碼給大家介紹的非常詳細(xì),文章末尾給大家補(bǔ)充介紹了vue2.x結(jié)合echarts2實(shí)現(xiàn)顯示具體省份熱力圖的問題,需要的朋友可以參考下
    2022-01-01
  • 前端vue實(shí)現(xiàn)的h5頁面接入微信支付流程(jsapi方式)

    前端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

最新評(píng)論