Vite打包性能優(yōu)化之開啟Gzip壓縮實踐過程
前言
在使用 vite 進行項目打包時，默認已經(jīng)幫我們做了一些優(yōu)化工作，比如代碼的壓縮，分包等等。除此之外，我們還有一些可選的優(yōu)化策略，比如使用 CDN ，開啟 Gzip 壓縮等。本文會介紹在 vite 中使用插件來開啟 Gzip 壓縮。
Gzip
Gzip 是一種壓縮算法，在網(wǎng)絡(luò)傳輸中使用非常普遍。隨便打開一個網(wǎng)頁，都使用了 gzip 壓縮：
需要注意的是，Gzip 壓縮僅對于文本類型的資源有明顯提示，壓縮后的體積大約是壓縮前的 1/3。對于圖片，音視頻等媒體資源，本身就采用了有損壓縮，所以再使用 gzip 并不能得到很大提升，有時候反而會適得其反。
開啟 Gzip
前端項目打包出的 js，css資源，非常適合使用 gzip 進行壓縮。
這樣，用戶瀏覽器收到服務(wù)器返回的 gzip 類型資源時，會自動解壓縮。這樣，既能減少帶寬的損耗，也能加快資源傳輸?shù)臅r間。
Vite 社區(qū)插件中有一個 vite-plugin-compression，可以用來做 gzip 壓縮。請看示例。
未使用 gzip 壓縮前，打包后有一個很大的文件，控制臺也給出了提示，使用 gzip 能大大減小文件體積：
安裝插件：
pnpm add -D vite-plugin-compression
配置文件：
vite.config.js
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [
// ...
viteCompression({
threshold: 1024000 // 對大于 1mb 的文件進行壓縮
})
],
});
再次打包：
可以看到，原來 2mb 多的文件，經(jīng)過壓縮后還剩 663 kb，壓縮帶來的提升非常明顯。
插件的其他配置
- filter：過濾器，對哪些類型的文件進行壓縮，默認為 ‘/.(js|mjs|json|css|html)$/i’
- verbose: true：是否在控制臺輸出壓縮結(jié)果，默認為 true
- threshold：啟用壓縮的文件大小限制，單位是字節(jié)，默認為 0
- disable: false：是否禁用壓縮，默認為 false
- deleteOriginFile：壓縮后是否刪除原文件，默認為 false
- algorithm：采用的壓縮算法，默認是 gzip
- ext：生成的壓縮包后綴
總結(jié)
到此這篇關(guān)于Vite打包性能優(yōu)化之開啟Gzip壓縮的文章就介紹到這了,更多相關(guān)Vite開啟Gzip壓縮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-cli history模式實現(xiàn)tomcat部署報404的解決方式
這篇文章主要介紹了vue-cli history模式實現(xiàn)tomcat部署報404的解決方式,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
詳解Vue學(xué)習(xí)筆記入門篇之組件的內(nèi)容分發(fā)(slot)
這篇文章主要介紹了詳解Vue學(xué)習(xí)筆記入門篇之組件的內(nèi)容分發(fā)(slot)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
VUE中如何調(diào)用高德地圖獲取當前位置(VUE2.0和3.0通用)
使用uniapp開發(fā)微信小程序時,多多少少會遇到獲取當前位置的詳細信息,下面這篇文章主要給大家介紹了關(guān)于VUE中如何調(diào)用高德地圖獲取當前位置(VUE2.0和3.0通用)的相關(guān)資料,需要的朋友可以參考下2023-04-04
Vue與compressor.js實現(xiàn)高效文件壓縮的方法
本文將介紹基于 Vue 框架和 compressor.js 的上傳時文件壓縮實現(xiàn)方法,通過在上傳過程中對文件進行壓縮,減小文件大小,提升上傳速度,為用戶創(chuàng)造更快捷、高效的上傳體驗,感興趣的朋友跟隨小編一起看看吧2024-03-03
React/vue開發(fā)報錯TypeError:this.getOptions?is?not?a?function
這篇文章主要給大家介紹了關(guān)于React/vue開發(fā)報錯TypeError:this.getOptions?is?not?a?function的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
vue項目接口管理,所有接口都在apis文件夾中統(tǒng)一管理操作
這篇文章主要介紹了vue項目接口管理,所有接口都在apis文件夾中統(tǒng)一管理操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue2.0/3.0雙向數(shù)據(jù)綁定的實現(xiàn)原理詳解
這篇文章主要給大家介紹了關(guān)于Vue2.0/3.0雙向數(shù)據(jù)綁定的實現(xiàn)原理,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家詳細介紹了Vue之Axios的異步通信，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
Vue 3 自定義權(quán)限指令 v-action的作用
在實際的前端開發(fā)中,尤其是涉及到權(quán)限管理的系統(tǒng),我們經(jīng)常需要根據(jù)用戶的權(quán)限動態(tài)控制某些按鈕的顯示和隱藏,這篇文章主要介紹了Vue 3 自定義權(quán)限指令 v-action的相關(guān)知識,需要的朋友可以參考下2025-04-04
詳解如何使用 vue-cli 開發(fā)多頁應(yīng)用
本篇文章主要介紹了詳解如何使用 vue-cli 開發(fā)多頁應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12