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