在你的項目使用了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語法錯誤。下載此插件時可能需要FQ，可以使用下方命令配置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 模塊，一般不會默認安裝此模塊，可以使用上文提到的方法安裝。
所以使用動態壓縮還是靜態壓縮各位讀者可以自行決定