快捷導(dǎo)航

在Vue3+Vite項(xiàng)目中開啟Gzip壓縮過程

更新時間：2025年10月10日 09:45:17 作者：lennonlau

這篇文章主要介紹了在Vue3+Vite項(xiàng)目中開啟Gzip壓縮過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、安裝 Gzip 插件

通過 vite-plugin-compression 插件實(shí)現(xiàn) Gzip 壓縮，執(zhí)行命令安裝依賴：

npm install vite-plugin-compression --save-dev

#或使用 yarn/pnpm

yarn add vite-plugin-compression -D
pnpma dd -D vite-plugin-compression

二、配置 Vite 插件

在 vite.config.ts 中引入并配置插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    vue(),
    // Gzip 壓縮配置
    viteCompression({
      threshold: 1024000, // 對大于 1MB 的文件進(jìn)行壓縮
      algorithm: 'gzip',   // 壓縮算法（默認(rèn) gzip）
      ext: '.gz',         // 生成文件后綴
      deleteOriginFile: false // 是否刪除原始文件（建議保留）
    })
  ]
})

‌三、構(gòu)建驗(yàn)證

執(zhí)行 npm run build 后，檢查 dist 目錄是否生成 .gz 文件。

若生成，則表示配置成功‌。

四、服務(wù)器配置（以 Nginx 為例）

需在服務(wù)器端啟用 Gzip 支持

示例 Nginx 配置：

http {
  gzip on;
  gzip_types text/plain application/javascript text/css application/xml;
  gzip_min_length 1k;
  gzip_comp_level 6;
}

確保服務(wù)器優(yōu)先返回 .gz 文件‌。

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue transition組件及常用屬性
在使用Vue過渡動畫時,注意選擇器優(yōu)先級,謹(jǐn)慎合并樣式,Vue2中關(guān)于顯示隱藏的類名有v-enter、v-leave以及v-enter-active、v-leave-active等,這些可以用來定義動畫的持續(xù)時間和樣式,感興趣的朋友跟隨小編一起看看吧
2024-09-09
Vue2和Vue3響應(yīng)式原理對比分析
Vue2采用Object.defineProperty實(shí)現(xiàn)響應(yīng)式,存在無法監(jiān)聽新增屬性、數(shù)組索引變化及性能問題；Vue3使用Proxy全面覆蓋,支持更靈活的數(shù)據(jù)操作,性能更優(yōu)且TypeScript兼容性更好,推薦長期項(xiàng)目使用Vue3
2025-08-08
axios?發(fā)?post?請求，后端接收不到參數(shù)的完美解決方案
這篇文章主要介紹了axios?發(fā)?post?請求，后端接收不到參數(shù)的解決方案,場景很簡單，就是一個正常 axios post 請求，本文給大家分享問題原因分析及解決方案需要的朋友可以參考下
2022-12-12
ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)
這篇文章主要介紹了ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
vue中的slot-scope及scope.row用法
這篇文章主要介紹了vue中的slot-scope及scope.row用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
VUE項(xiàng)目中加載已保存的筆記實(shí)例方法
在本篇文章里小編給大家整理了一篇關(guān)于VUE項(xiàng)目中加載已保存的筆記實(shí)例方法，有興趣的讀者們可以參考下。
2019-09-09
vue2.0 watch里面的 deep和immediate用法說明
這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue通過?API?監(jiān)聽數(shù)組的變化
這篇文章主要介紹了vue通過?API?監(jiān)聽數(shù)組的變化,在?Vue?中，你可以通過監(jiān)聽數(shù)組的變化來更新界面，Vue?提供了一些特殊的語法以及?API?來實(shí)現(xiàn)對數(shù)組的監(jiān)聽，本文通過實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2023-05-05
vue-cli3 項(xiàng)目優(yōu)化之通過 node 自動生成組件模板 generate View、Component
這篇文章主要介紹了vue-cli3 項(xiàng)目優(yōu)化之通過 node 自動生成組件模板 generate View、Component的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-04-04
Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡單方法
這篇文章主要給大家介紹了關(guān)于Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡單方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12