vue單頁面打包文件大？首次加載慢？nginx帶你飛，從7.5M到1.3M蛻變過程(推薦)
找到nginx多網(wǎng)站配置文件：類似 nginx/sites-available/www.baidu.com
server {
listen 80;
index index.html index.htm index.nginx-debian.html;
server_name www.baidu.com;
location / {
root /mnt/www/www.baidu.com;
try_files $uri $uri/ /index.html;
}
}
參考頁面：https://router.vuejs.org/zh-cn/essentials/history-mode.html
cnpm run build 文件過大
打包生成文件：
瀏覽器訪問效果：
Nginx開啟gzip
找到nginx.config。關(guān)于gzip壓縮代碼：
http {gzip on; #開啟或關(guān)閉gzip on off
gzip_disable "msie6"; #不使用gzip IE6
gzip_min_length 100k; #gzip壓縮最小文件大小，超出進(jìn)行壓縮（自行調(diào)節(jié)）
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 3; #壓縮級別:1-10，數(shù)字越大壓縮的越好，時間也越長
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 壓縮文件類型
gzip_vary off; #跟Squid等緩存服務(wù)有關(guān)，on的話會在Header里增加 "Vary: Accept-Encoding"
}
配置完重啟Nginx
瀏覽器訪問效果：
上面為數(shù)據(jù)流接收大小，下面為解壓后實際大小。
識別gzip與非gzip請求
gzip請求：
非gzip請求：
gzip與非gzip在響應(yīng)頭中區(qū)別就是Content-Encoding是否表明是gzip壓縮格式。
而上面通過接收數(shù)據(jù)與實際數(shù)據(jù)大小相比也能明顯看出差異
webpack gzip
vue項目中config/index.js
productionGzip: true, //是否開啟gizp壓縮 productionGzipExtensions: ['js', 'css'],
開啟后cnpm run build會生成*.gz文件?！ ?/p>
像這樣：
上傳到服務(wù)器，測試查看接受文件大小。
gzip相應(yīng)539kb。并非加載app.........gz的 412kb
刪除*.gz文件，依舊539kb。
莫非，webpack打包gzip文件毫無卵用？？？？？？
gzip_static 靜態(tài)壓縮
經(jīng)過一番百度。得一寶貝。gzip_static
什么東東呢？字面上意思就是：gzip靜態(tài)。
賣個關(guān)子：
上面配置了。Nginx是可以開啟gzip壓縮，而且能夠?qū)崿F(xiàn)壓縮效果。而它是如何工作的呢？
客戶端發(fā)起請求
-》Nginx接收請求
-》Nginx加載文件進(jìn)行g(shù)zip打包壓縮成*.gz
-》返回給瀏覽器
-》瀏覽器解壓*.gz （應(yīng)該是它干的，反正看不見）
也就是說，每次請求，Nginx都會進(jìn)行壓縮返回、壓縮返回、壓縮返回、 將會導(dǎo)致浪費(fèi)大量CPU。
這么個大bug是誰設(shè)計的？如果請求量大，CPU會不會掛掉？//猜測
當(dāng)然，并不會，gizp打包壓縮后會臨時緩存，
所以，能不消耗CPU就不消耗CPU。
廢話太多，步入正題。放大招?。?/p>
nginx.conf
http { gzip on; #開啟或關(guān)閉gzip on off gzip_static on;#是否開啟gzip靜態(tài)資源
gzip_disable "msie6"; #不使用gzip IE6
gzip_min_length 100k; #gzip壓縮最小文件大小，超出進(jìn)行壓縮（自行調(diào)節(jié)）
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 3; #壓縮級別:1-10，數(shù)字越大壓縮的越好，時間也越長
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 壓縮文件類型
gzip_vary off; #跟Squid等緩存服務(wù)有關(guān)，on的話會在Header里增加 "Vary: Accept-Encoding"
}
emmmmmmmm.....重啟nginx
OK。上圖！
before:
after:
對比文件：
so 。開啟gzip_static后。流程就會變成
//偷懶寫法。。。。。if(*.gz){
return *.gz //懶得壓縮直接扔文件
}else{
return gzip() //壓縮再扔給瀏覽器
}
nginx的gzip壓縮力度從1-9 。如果開啟過大，CPU會嚴(yán)重浪費(fèi)，而webpack壓縮gzip默認(rèn)是9.因此，打包壓縮gzip靜態(tài)資源是很有必要的
所以，按需加載暫時不用考慮了
相關(guān)文章
這篇文章主要介紹了Vue自定義詢問彈框和輸入彈框,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)樣式幾種常用方法總結(jié)的相關(guān)資料,在我們的前端界面中,很多的地方的樣式都是不確定的狀態(tài),要根據(jù)其他內(nèi)容的變化而變化樣式的,需要的朋友可以參考下2023-08-08
Vue子組件props從父組件接收數(shù)據(jù)并存入data
這篇文章主要介紹了Vue子組件props從父組件接收數(shù)據(jù)并存入data的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了淺談vant組件Picker 選擇器選單選問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了通過命令創(chuàng)建vue項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Vue3中使用styled-components的實現(xiàn)
本文主要介紹了Vue3中使用styled-components的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
下面小編就為大家分享一篇Vue下的國際化處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)通知或詳情類彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在vue框架開發(fā)中,有時候我們需要對元素的樣式進(jìn)行動態(tài)控制,比如tab按鈕的切換,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)綁定Class的幾種常用方式,需要的朋友可以參考下2023-03-03
Vue如何實現(xiàn)文件預(yù)覽和下載功能的前端上傳組件
在Vue.js項目中,使用ElementUI的el-upload組件可以輕松實現(xiàn)文件上傳功能,通過配置組件參數(shù)和實現(xiàn)相應(yīng)的方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09