在你的專案使用了Vue的路由懶載入、Vue使用CDN引用專案元件，減少專案體積 後，還是覺得專案載入速度慢，效果不盡如人意的時候，還有一個“瘦身專案”可以完成，那就是利用nginx和webpack來使用gzip壓縮功能。
通常來講更小的體積就意味著更快的載入速度，也就對應著更好使用者體驗。整個過程大體分為兩步，廢話不多講，開始
一、 webpack外掛 compression-webpack-plugin
Vue壓縮功能的實現主要依賴於webpack的一個外掛compression-webpack-plugin ，這個外掛可以將npm run build之後的.js .css（看自己配置）檔案，打包成.js.gz .css.gz檔案。
首先需要安裝compression-webpack-plugin依賴
npm install --save-dev compression-webpack-plugin@1.1.2
這裡推薦使用1.1.2版本，因為高版本的外掛在使用時會報ES6語法錯誤。下載此外掛時可能需要翻牆，可以使用下方命令配置npm 代理
npm config set proxy http://username:password@ip:port
之後需要開啟專案中的prductionGzip選項，具體路徑在config/index.js build下：
開啟之後還需要配置bulid/webpack.prod.conf.js 檔案，找到下圖所示位置將asset更換為filename:
至此，vue部分的配置完成。可以使用npm run build檢驗一下是否配置成功，如果配置沒有問題打包結果與下圖應該是比較類似的：
像這些xxxxxx.js.gz就是打包之後的檔案了，可以看到壓縮率還是比較可觀的
二、nginx配置
在配置完Vue部分後直接部署到nginx上是不會生效的，還必須開啟nginx的gzip功能才可以。這裡以nginx-1.13.0為例，首先需要確認當前nginx是否擁有
gzip模組，一般情況下都會預設安裝對應。執行以下命令
nginx -V
返回結果中會包含當前nginx啟用了那些模組
如果返回結果中不包含gzip模組的話，可以重新編譯nginx並安裝相對應模組，找到nginx原始碼檔案包，執行
./configure --with-所需要安裝的模組名
命令執行成功後執行make命令，千萬不要執行make install！執行make install會直接將之前安裝的nginx給覆蓋掉。
make命令執行成功之後會在objs目錄下生成nginx可執行檔案，直接使用此nginx替換掉原本的nginx即可。
在確認模組安裝完畢之後，修改conf/nginx.conf檔案，加入如下內容
#開啟gzip功能 gzip on; #開啟gzip靜態壓縮功能 gzip_static on; #gzip快取大小 gzip_buffers 4 16k; #gzip http版本 gzip_http_version 1.1; #gzip 壓縮級別 1-10 gzip_comp_level 5; #gzip 壓縮型別 gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中新增Vary: Accept-Encoding，建議開啟
gzip_vary on;
配置完畢之後重啟nginx即可
三、驗證配置結果
nginx配置成功之後，再次訪問對應網站返回的應該是對應的gzip資源，可以利用chrome檢視返回結果
看到content-Encodeing: gzip 就代表gzip已經成功開啟了
四、gzip_static的作用
nginx在設定了gzip on 後就已經開啟了gzip壓縮功能，不過這時候nginx所使用的是動態壓縮。在動態壓縮的情況下nginx會自動的將檔案壓縮成.gz檔案，這時候就算不配置vue也能達到一樣的效果。
但是動態壓縮無疑會佔用伺服器的資源來進行此操作。
相對的nginx提供了靜態壓縮模式，也就是gzip_static，在這個模式下nginx會去尋找對應檔案的.gz檔案，只有.gz檔案不存在的時候才會去壓縮對應檔案。這樣就不會過度佔用伺服器資源。
gzip_static功能依賴http_gzip_static_module 模組，一般不會預設安裝此模組，可以使用上文提到的方法安裝。
所以使用動態壓縮還是靜態壓縮各位讀者可以自行決定