vue單頁面打包文件大？首次加載慢？nginx帶你飛，從7.5M到1.3M蛻變

部署各vue項目，走了一遍坑。。。。

vue單頁面應用刷新404

　　找到nginx多網站配置文件：相似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。關於gzip壓縮代碼：

http {
　　gzip on; #開啓或關閉gzip on off 
　　gzip_disable "msie6"; #不使用gzip IE6 
　　gzip_min_length 100k; #gzip壓縮最小文件大小，超出進行壓縮（自行調節） 
　　gzip_buffers 4 16k; #buffer 不用修改 
　　gzip_comp_level 3; #壓縮級別:1-10，數字越大壓縮的越好，時間也越長 
　　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等緩存服務有關，on的話會在Header裏增長 "Vary: Accept-Encoding" 
}

　　配置完重啓Nginx

　　瀏覽器訪問效果：

　　

　　上面爲數據流接收大小，下面爲解壓後實際大小。

識別gzip與非gzip請求

　　gzip請求：

　　

　　非gzip請求：

　　

　　gzip與非gzip在響應頭中區別就是Content-Encoding是否代表是gzip壓縮格式。

　　而上面經過接收數據與實際數據大小相比也能明顯看出差別

webpack  gzip

　　vue項目中config/index.js

productionGzip: true, //是否開啓gizp壓縮
productionGzipExtensions: ['js', 'css'],

　　開啓後cnpm run build 會生成*.gz文件。

　　像這樣：

　　

　　上傳到服務器，測試查看接受文件大小。

　　

　　gzip相應539kb。並不是加載app.........gz的 412kb

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

　　莫非，webpack打包gzip文件毫無卵用？？？？？？

gzip_static 靜態壓縮

　　通過一番百度。得一寶貝。gzip_static

　　什麼東東呢？字面上意思就是：gzip靜態。

　　賣個關子：

 

　　　　上面配置了。Nginx是能夠開啓gzip壓縮，並且可以實現壓縮效果。而它是如何工做的呢？

　　　　客戶端發起請求

　　　　　　-》Nginx接收請求

　　　　　　　　-》Nginx加載文件進行gzip打包壓縮成*.gz  

　　　　　　　　　　-》返回給瀏覽器

　　　　　　　　　　　　-》瀏覽器解壓*.gz （應該是它乾的，反正看不見）

　　　 也就是說，每次請求，Nginx都會進行壓縮返回、壓縮返回、壓縮返回、 將會致使浪費大量CPU。

　　　 這麼個大bug是誰設計的？若是請求量大，CPU會不會掛掉？//猜想

　　　 固然，並不會，gizp打包壓縮後會臨時緩存，

　　　 因此，能不消耗CPU就不消耗CPU。

　　　 廢話太多，步入正題。放大招！！

　　　 nginx.conf　

http {
　　gzip on; #開啓或關閉gzip on off
　　gzip_static on;#是否開啓gzip靜態資源 #nginx對於靜態文件的處理模塊，該模塊能夠讀取預先壓縮的gz文件，這樣能夠減小每次請求進行gzip壓縮的CPU資源消耗。該模塊啓用後，nginx首先檢查是否存在請求靜態文件的gz結尾的文件，若是有則直接返回該gz文件內容。爲了要兼容不支持gzip的瀏覽器，啓用gzip_static模塊就必須同時保留原始靜態文件和gz文件。這樣的話，在有大量靜態文件的狀況下，將會大大增長磁盤空間。咱們能夠利用nginx的反向代理功能實現只保留gz文件。
　　gzip_disable "msie6"; #不使用gzip IE6 
　　gzip_min_length 100k; #gzip壓縮最小文件大小，超出進行壓縮（自行調節） 
　　gzip_buffers 4 16k; #buffer 不用修改 
　　gzip_comp_level 3; #壓縮級別:1-10，數字越大壓縮的越好，時間也越長 
　　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等緩存服務有關，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會嚴重浪費，而webpack壓縮gzip默認是9.所以，打包壓縮gzip靜態資源是頗有必要的

　　因此，按需加載暫時不用考慮了

　　

　　參考網頁：並未好好看

　　　　探索HTTP傳輸中gzip壓縮的祕密

　　　　Angular-Cli+nginx使用gzip static再次加快應用訪問速度！！！