使用vue打包時gzip壓縮的兩種方案
開局一張圖:
可以看出,在項目部署后,我們的資源文件請求都會保持原本大小,如果文件過大,并且很多的情況下,會導(dǎo)致網(wǎng)絡(luò)請求耗時,嚴(yán)重點可能阻塞后面的進程。
介紹兩種gzip壓縮的方式
1、打包的時候通過webpack配置生成對應(yīng)的 .gz 文件,瀏覽器請求xx.js/css等文件時,服務(wù)器返回對應(yīng)的xxx.js.gz文件;
2、瀏覽器請求xx.js文件時,服務(wù)器對xx.js文件進行g(shù)zip壓縮后傳輸給瀏覽器。
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, // 是否刪除未壓縮的源文件,謹慎設(shè)置,如果希望提供非gzip的資源,可不設(shè)置或者設(shè)置為false(比如刪除打包后的gz后還可以加載到原始資源文件) }), ], }, };
這里對js、html、css文件進行了壓縮處理,并沒有進行圖片壓縮,因為圖片壓縮并不能實際減少文件大小,反而會導(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壓縮
前端不用進行任何配置,也不用webpack生成gz文件,服務(wù)器進行處理,拿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ū)大小,壓縮的等級,需要壓縮的文件等(如果需要更詳細的配置,可以查看nginx的配置文檔),看下效果:
響應(yīng)頭中會攜帶gzip壓縮配置,每次請求xx.js文件,服務(wù)器都會進行實時壓縮。
兩種方案的優(yōu)缺點:
1、webpack打包,然后直接使用靜態(tài)的gz,缺點就是打包后文件體積太大,但是不耗服務(wù)器性能;
2、使用nginx在線gzip,缺點就是耗性能,需要實時壓縮,但是vue打包后的文件體積小。
這里可能有些同學(xué)就要問題,我想在有g(shù)z文件的時候進行靜態(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文件,當(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ù)進行壓縮 ? ? ? ? ? ? ? ? ? ? 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)文章
詳解vue-router 2.0 常用基礎(chǔ)知識點之router-link
這篇文章主要介紹了詳解vue-router 2.0 常用基礎(chǔ)知識點之router-link,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05關(guān)于Nuxt的五種渲染模式的差異和使用場景全解析
這篇文章主要介紹了關(guān)于Nuxt的五種渲染模式的差異和使用場景全解析,在過去傳統(tǒng)開發(fā)中,頁面渲染任務(wù)是由服務(wù)端完成的,那么Nuxt是如何渲染的呢,需要的朋友可以參考下2023-04-04vue3?element-plus實現(xiàn)圖片預(yù)覽功能實例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項目中我們經(jīng)常會碰到圖片預(yù)覽的功能需求,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-09-09vue中使用loadsh的debounce防抖函數(shù)問題
這篇文章主要介紹了vue中使用loadsh的debounce防抖函數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11