使用vue打包時(shí)gzip壓縮的兩種方案
開局一張圖：
可以看出，在項(xiàng)目部署后，我們的資源文件請求都會(huì)保持原本大小，如果文件過大，并且很多的情況下，會(huì)導(dǎo)致網(wǎng)絡(luò)請求耗時(shí)，嚴(yán)重點(diǎn)可能阻塞后面的進(jìn)程。
介紹兩種gzip壓縮的方式
1、打包的時(shí)候通過webpack配置生成對(duì)應(yīng)的 .gz 文件，瀏覽器請求xx.js/css等文件時(shí)，服務(wù)器返回對(duì)應(yīng)的xxx.js.gz文件；
2、瀏覽器請求xx.js文件時(shí)，服務(wù)器對(duì)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配置（沒有此文件可以在項(xiàng)目根路徑創(chuàng)建一個(gè)文件）：
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才會(huì)壓縮
threshold: 10240, // 對(duì)超過10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false, // 是否刪除未壓縮的源文件，謹(jǐn)慎設(shè)置，如果希望提供非gzip的資源，可不設(shè)置或者設(shè)置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
}),
],
},
};
這里對(duì)js、html、css文件進(jìn)行了壓縮處理，并沒有進(jìn)行圖片壓縮，因?yàn)閳D片壓縮并不能實(shí)際減少文件大小，反而會(huì)導(dǎo)致打包后生成很多同大小的gz文件，得不償失。
當(dāng)然了，上文提到過，瀏覽器請求xx.js/css等文件時(shí)，服務(wù)器返回對(duì)應(yīng)的xxx.js.gz文件，所以還需要在服務(wù)器配置一個(gè)屬性，以期望它能正常返回我們需要的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這個(gè)屬性是靜態(tài)加載本地的gz文件。
看下效果：
gzip壓縮比率在5-6倍，nginx配置了靜態(tài)gz加載后，瀏覽器也返回的是gz文件，這樣就會(huì)請求小文件而不會(huì)導(dǎo)致請求卡線程，并且，因?yàn)楸Ａ袅嗽次募?，所以?dāng)我們刪除gz后，瀏覽器會(huì)自動(dòng)去請求原始文件，而不會(huì)導(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;
#壓縮級(jí)別官網(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ū)大小，壓縮的等級(jí)，需要壓縮的文件等（如果需要更詳細(xì)的配置，可以查看nginx的配置文檔），看下效果：
響應(yīng)頭中會(huì)攜帶gzip壓縮配置，每次請求xx.js文件，服務(wù)器都會(huì)進(jìn)行實(shí)時(shí)壓縮。
兩種方案的優(yōu)缺點(diǎn)：
1、webpack打包，然后直接使用靜態(tài)的gz，缺點(diǎn)就是打包后文件體積太大，但是不耗服務(wù)器性能；
2、使用nginx在線gzip，缺點(diǎn)就是耗性能，需要實(shí)時(shí)壓縮，但是vue打包后的文件體積小。
這里可能有些同學(xué)就要問題，我想在有g(shù)z文件的時(shí)候進(jìn)行靜態(tài)壓縮，不存在gz文件的時(shí)候進(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)先級(jí)高，會(huì)先加載靜態(tài)gz文件，當(dāng)同目錄下不存在此文件的時(shí)候，會(huì)執(zhí)行在線壓縮的命令。
有些小伙伴就會(huì)納悶，既然都開啟的情況下，我們怎么區(qū)分使用了靜態(tài)加載還是在線壓縮呢？
響應(yīng)頭的Content-Edcoding:gzip表示gzip壓縮已經(jīng)生效，而Etag中只有簡單字符表示靜態(tài)資源加載，而前面帶 W/ 表示啟動(dòng)了在線壓縮。
看下圖：
就是兩種gzip壓縮的方案了。
vue項(xiàng)目開啟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, //對(duì)超過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)用以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
我在做一個(gè)附件刪除功能的時(shí)候發(fā)現(xiàn),明明打印出來附件已經(jīng)沒有數(shù)據(jù)了但是頁面就是不刷新, this.$set()不生效,所以本文小編給大家介紹了vue中this.$set()不更新的解決方法,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了詳解Vue-cli3.X使用px2rem遇到的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決
這篇文章主要介紹了關(guān)于element-ui?select?下拉框位置錯(cuò)亂問題解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼
本篇文章主要介紹了Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue實(shí)現(xiàn)簡單的星級(jí)評(píng)分組件源碼
這篇文章主要介紹了vue星級(jí)評(píng)分組件源碼,代碼簡單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
適用于 Vue 的播放器組件Vue-Video-Player操作
這篇文章主要介紹了適用于 Vue 的播放器組件Vue-Video-Player操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
解決element?ui?cascader?動(dòng)態(tài)加載回顯問題
這篇文章主要介紹了element?ui?cascader?動(dòng)態(tài)加載回顯問題解決方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
開發(fā)任務(wù)中有這樣一個(gè)需求，下拉框中需要展示超過5000條數(shù)據(jù)，甚至更多，這數(shù)據(jù)量直接整個(gè)頁面卡死了，就想到在下拉框中加分頁，下面小編通過實(shí)例代碼介紹下Vue下拉框加分頁搜索功能的實(shí)現(xiàn)，感興趣的朋友一起看看吧2022-11-11
這篇文章主要介紹了vue cli4環(huán)境變量和模式示例詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
隨著vue2的落幕,vue3越來成熟,有必要更新一下vue3的父子組件之間的傳值方式,這里介紹下vue3+vite+ts父子組件之間的傳值方式實(shí)例詳解,感興趣的朋友一起看看吧2023-12-12