react專案中利用dva腳手架，roadhog打包工具打包後只生成了一個index.css 和 index.js 。所有的 js檔案 都打包在了一個 index.js 檔案中，所以這個檔案有1.1M。部署到伺服器上，首次訪問首頁載入的會特別慢，這樣會流失很多的使用者。

解決辦法： gzip 壓縮。

GZIP編碼是一種用來改進WEB應用程式效能的技術。大流量的WEB站點常常使用GZIP壓縮技術來讓使用者感受更快的速度。這一般是指WWW伺服器中安裝的一個功能，當有人來訪問這個伺服器中的網站時，伺服器中的這個功能就將網頁內容壓縮後傳輸到來訪的電腦瀏覽器中顯示出來.一般對純文字內容可壓縮到原大小的40%.這樣傳輸就快了，效果就是你點選網址後會很快的顯示出來.當然這也會增加伺服器的負載. 一般伺服器中都安裝有這個功能模組的。

gzip可以極大的加速網站.有時壓縮比率高達80%，近來測試了一下，最少都有40%以上，還是相當不錯的.在Apache2之後的版本，模組名不叫gzip，而叫mod_deflate。

Nginx 開啟 gzip ：

在 nginx.conf 中新增以下配置：

1 gzip on;

2 gzip_buffers 32 4k;

3 gzip_comp_level 6;

4 gzip_min_length 200;

5 gzip_types text/css text/xmlapplication/javascript;

6 gzip_vary on;

重啟 nginx：

/usr/local/nginx/sbin/nginx -s reload

1

清除瀏覽器快取，重新訪問網頁，可以發現首次載入速度快了很多。

主要是對專案進行瘦身，去掉一些不需要的功能

1. 利用[chunkhash]來對沒有改動的模組進行快取，從而達到增量更新的目的

2. 對於一些固定資源，完全可以抽離出來，放CDN

3. 如果專案過大，嘗試下把子專案分離切割出來

兩個措施。

從設計層面，看是否可以按流程先後，或常用與否，分模組設計，按需載入。比如登入介面只加載簡單登入功能。登入成功後，import 其它模組。

Webpack會打包成多個小的chunk, 瀏覽器可以多工並行下載，稍微快一些。