vue單頁(yè)面打包文件大？首次加載慢？nginx帶你飛，從7.5M到1.3M蛻變過(guò)程(推薦)

　　找到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;
  }
}

參考頁(yè)面：https://router.vuejs.org/zh-cn/essentials/history-mode.html

cnpm run build 文件過(guò)大

　　打包生成文件：

　　瀏覽器訪問(wèn)效果：

Nginx開(kāi)啟gzip

　　找到nginx.config。關(guān)于gzip壓縮代碼：

http {gzip on; #開(kāi)啟或關(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; #壓縮級(jí)別:1-10，數(shù)字越大壓縮的越好，時(shí)間也越長(zhǎng)
 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的話會(huì)在Header里增加 "Vary: Accept-Encoding"
}

　　配置完重啟Nginx

　　瀏覽器訪問(wèn)效果：

　　上面為數(shù)據(jù)流接收大小，下面為解壓后實(shí)際大小。

識(shí)別gzip與非gzip請(qǐng)求

　　gzip請(qǐng)求：

　　非gzip請(qǐng)求：

　　gzip與非gzip在響應(yīng)頭中區(qū)別就是Content-Encoding是否表明是gzip壓縮格式。

　　而上面通過(guò)接收數(shù)據(jù)與實(shí)際數(shù)據(jù)大小相比也能明顯看出差異

webpack gzip

　　vue項(xiàng)目中config/index.js

productionGzip: true, //是否開(kāi)啟gizp壓縮
productionGzipExtensions: ['js', 'css'],

開(kāi)啟后cnpm run build會(huì)生成*.gz文件。　　

像這樣：

　　上傳到服務(wù)器，測(cè)試查看接受文件大小。

　　gzip相應(yīng)539kb。并非加載app.........gz的 412kb

　　刪除*.gz文件，依舊539kb。

　　莫非，webpack打包gzip文件毫無(wú)卵用？？？？？？

gzip_static 靜態(tài)壓縮

　　經(jīng)過(guò)一番百度。得一寶貝。gzip_static

　　什么東東呢？字面上意思就是：gzip靜態(tài)。

　　賣個(gè)關(guān)子：

　　　　上面配置了。Nginx是可以開(kāi)啟gzip壓縮，而且能夠?qū)崿F(xiàn)壓縮效果。而它是如何工作的呢？

　　　　客戶端發(fā)起請(qǐng)求

　　　　　　-》Nginx接收請(qǐng)求

　　　　　　　　-》Nginx加載文件進(jìn)行g(shù)zip打包壓縮成*.gz

　　　　　　　　　　-》返回給瀏覽器

　　　　　　　　　　　　-》瀏覽器解壓*.gz （應(yīng)該是它干的，反正看不見(jiàn)）

　　　 也就是說(shuō)，每次請(qǐng)求，Nginx都會(huì)進(jìn)行壓縮返回、壓縮返回、壓縮返回、 將會(huì)導(dǎo)致浪費(fèi)大量CPU。

　　　 這么個(gè)大bug是誰(shuí)設(shè)計(jì)的？如果請(qǐng)求量大，CPU會(huì)不會(huì)掛掉？//猜測(cè)

　　　 當(dāng)然，并不會(huì)，gizp打包壓縮后會(huì)臨時(shí)緩存，

　　　 所以，能不消耗CPU就不消耗CPU。

　　　 廢話太多，步入正題。放大招?。?/p>

　　　 nginx.conf　

http {　　 gzip on; #開(kāi)啟或關(guān)閉gzip on off　　 gzip_static on;#是否開(kāi)啟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; #壓縮級(jí)別:1-10，數(shù)字越大壓縮的越好，時(shí)間也越長(zhǎng)
 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的話會(huì)在Header里增加 "Vary: Accept-Encoding"
}

　　emmmmmmmm.....重啟nginx

　　OK。上圖！

　　before:

　　after:

　　對(duì)比文件：

　　so 。開(kāi)啟gzip_static后。流程就會(huì)變成

//偷懶寫(xiě)法。。。。。if(*.gz){
 return *.gz //懶得壓縮直接扔文件
}else{
 return gzip() //壓縮再扔給瀏覽器 
}

　　nginx的gzip壓縮力度從1-9 。如果開(kāi)啟過(guò)大，CPU會(huì)嚴(yán)重浪費(fèi)，而webpack壓縮gzip默認(rèn)是9.因此，打包壓縮gzip靜態(tài)資源是很有必要的

　　所以，按需加載暫時(shí)不用考慮了