使用vue打包時gzip壓縮的兩種方案
開局一張圖：
可以看出，在項目部署后，我們的資源文件請求都會保持原本大小，如果文件過大，并且很多的情況下，會導(dǎo)致網(wǎng)絡(luò)請求耗時，嚴(yán)重點可能阻塞后面的進(jìn)程。
介紹兩種gzip壓縮的方式
1、打包的時候通過webpack配置生成對應(yīng)的 .gz 文件，瀏覽器請求xx.js/css等文件時，服務(wù)器返回對應(yīng)的xxx.js.gz文件；
2、瀏覽器請求xx.js文件時，服務(wù)器對xx.js文件進(jìn)行g(shù)zip壓縮后傳輸給瀏覽器。
webpack打包生成gz文件
安裝插件（compression-webpack-plugin）：
npm install compression-webpack-plugin --save-dev
vue.config.js文件進(jìn)行webpack配置（沒有此文件可以在項目根路徑創(chuàng)建一個文件）：
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
plugins: [
new CompressionPlugin({
algorithm: 'gzip', // 使用gzip壓縮
test: /\.js$|\.html$|\.css$/, // 匹配文件名
filename: '[path].gz[query]', // 壓縮后的文件名(保持原文件名，后綴加.gz)
minRatio: 1, // 壓縮率小于1才會壓縮
threshold: 10240, // 對超過10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false, // 是否刪除未壓縮的源文件，謹(jǐn)慎設(shè)置，如果希望提供非gzip的資源，可不設(shè)置或者設(shè)置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
}),
],
},
};
這里對js、html、css文件進(jìn)行了壓縮處理，并沒有進(jìn)行圖片壓縮，因為圖片壓縮并不能實際減少文件大小，反而會導(dǎo)致打包后生成很多同大小的gz文件，得不償失。
當(dāng)然了，上文提到過，瀏覽器請求xx.js/css等文件時，服務(wù)器返回對應(yīng)的xxx.js.gz文件，所以還需要在服務(wù)器配置一個屬性，以期望它能正常返回我們需要的gz文件。
這里拿nginx舉例（nginx.conf文件）：
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
gzip_static on;
server {
listen 8462;
server_name localhost;
location / {
root dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}其中g(shù)zip_static on這個屬性是靜態(tài)加載本地的gz文件。
看下效果：
gzip壓縮比率在5-6倍，nginx配置了靜態(tài)gz加載后，瀏覽器也返回的是gz文件，這樣就會請求小文件而不會導(dǎo)致請求卡線程，并且，因為保留了源文件，所以當(dāng)我們刪除gz后，瀏覽器會自動去請求原始文件，而不會導(dǎo)致界面出現(xiàn)任何問題（如圖二）。
靜態(tài)加載gz文件主要是依托于下面的請求頭：
服務(wù)器在線gzip壓縮
前端不用進(jìn)行任何配置，也不用webpack生成gz文件，服務(wù)器進(jìn)行處理，拿nginx舉例：
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
# 開啟gzip
gzip on;
# 設(shè)置緩沖區(qū)大小
gzip_buffers 4 16k;
#壓縮級別官網(wǎng)建議是6
gzip_comp_level 6;
#壓縮的類型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php;
server {
listen 8462;
server_name localhost;
location / {
root dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
上面有一些關(guān)于gzip的配置，首先是開啟gzip，設(shè)置緩沖區(qū)大小，壓縮的等級，需要壓縮的文件等（如果需要更詳細(xì)的配置，可以查看nginx的配置文檔），看下效果：
響應(yīng)頭中會攜帶gzip壓縮配置，每次請求xx.js文件，服務(wù)器都會進(jìn)行實時壓縮。
兩種方案的優(yōu)缺點：
1、webpack打包，然后直接使用靜態(tài)的gz，缺點就是打包后文件體積太大，但是不耗服務(wù)器性能；
2、使用nginx在線gzip，缺點就是耗性能，需要實時壓縮，但是vue打包后的文件體積小。
這里可能有些同學(xué)就要問題，我想在有g(shù)z文件的時候進(jìn)行靜態(tài)壓縮，不存在gz文件的時候進(jìn)行在線壓縮而不是加載源文件，要怎么做呢？
簡單，兩種配置都寫上即可。
gzip on; gzip_static on; gzip_comp_level 2; gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
首先，gzip_static的優(yōu)先級高，會先加載靜態(tài)gz文件，當(dāng)同目錄下不存在此文件的時候，會執(zhí)行在線壓縮的命令。
有些小伙伴就會納悶，既然都開啟的情況下，我們怎么區(qū)分使用了靜態(tài)加載還是在線壓縮呢？
響應(yīng)頭的Content-Edcoding:gzip表示gzip壓縮已經(jīng)生效，而Etag中只有簡單字符表示靜態(tài)資源加載，而前面帶 W/ 表示啟動了在線壓縮。
看下圖：
就是兩種gzip壓縮的方案了。
vue項目開啟gzip壓縮
前端配置
拆完包之后，我們再用gzip做一下壓縮 安裝compression-webpack-plugin
// yarn add compression-webpack-plugin -D
// 在vue.congig.js中引入并修改webpack配置
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
? ? ? ? if (process.env.NODE_ENV === 'production') {
? ? ? ? ? ? // 為生產(chǎn)環(huán)境修改配置...
? ? ? ? ? ? config.mode = 'production'
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? plugins: [new CompressionPlugin({
? ? ? ? ? ? ? ? ? ? test: /\.js$|\.html$|\.css/, //匹配文件名
? ? ? ? ? ? ? ? ? ? threshold: 10240, //對超過10k的數(shù)據(jù)進(jìn)行壓縮
? ? ? ? ? ? ? ? ? ? deleteOriginalAssets: false //是否刪除原文件
? ? ? ? ? ? ? ? })]
? ? ? ? ? ? }
? ? ? ? }后端配置
在服務(wù)器我們也要做相應(yīng)的配置 如果發(fā)送請求的瀏覽器支持gzip，就發(fā)送給它gzip格式的文件 我的服務(wù)器是用express框架搭建的 只要安裝一下compression就能使用
const compression = require('compression')
app.use(compression()) ?// 在其他中間件使用之前調(diào)用以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue3中v-model語法糖的三種寫法,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了mpvue 單文件頁面配置詳解，本文將介紹如何在 mpvue 官方模板的基礎(chǔ)上，通過配置 mpvue-config-loader 來實現(xiàn)在 vue 文件內(nèi)書寫小程序的頁面配置，感興趣的小伙伴們可以參考一下2018-12-12
詳解vue-router 2.0 常用基礎(chǔ)知識點之router-link
這篇文章主要介紹了詳解vue-router 2.0 常用基礎(chǔ)知識點之router-link，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了關(guān)于vite proxy跨域問題的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
關(guān)于Nuxt的五種渲染模式的差異和使用場景全解析
這篇文章主要介紹了關(guān)于Nuxt的五種渲染模式的差異和使用場景全解析,在過去傳統(tǒng)開發(fā)中，頁面渲染任務(wù)是由服務(wù)端完成的,那么Nuxt是如何渲染的呢,需要的朋友可以參考下2023-04-04
vue3?element-plus實現(xiàn)圖片預(yù)覽功能實例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項目中我們經(jīng)常會碰到圖片預(yù)覽的功能需求,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue實現(xiàn)記住賬號密碼功能,用戶登錄時若勾選“記住我”功能選項，則將登錄名和密碼（加密后）存入本地緩存，下次登錄頁面加載時自動獲取保存好的賬號和密碼（需解密），回顯到登錄輸入框中，下面分享我實現(xiàn)的具體步驟，需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡單的登錄彈出框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
vue中使用loadsh的debounce防抖函數(shù)問題
這篇文章主要介紹了vue中使用loadsh的debounce防抖函數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11