原文地址：https://jingyan.baidu.com/album/454316ab29d0c0f7a7c03a1f.html?picindex=1
vue 項目開啟gzip壓縮和部署 nginx 開啟gzip優化性能
第一步，在vue項目中安裝依賴並將productionGzip改為true，開啟Gzip壓縮：
npm install --save-dev compression-webpack-plugin
第二步，運行 npm run build打包項目，這時可能會報錯，提示ValidationError: Compression Plugin Invalid Options。根據官網提示，需要將CompressionWebpackPlugin的設置由asset改為filename。
第三步，再次運行 npm run build打包項目，這時可能會繼續報錯，提示TypeError: Cannot read property 'emit' of undefined。據我查證，是安裝的compression-webpack-plugin依賴有問題，需要卸載compression-webpack-plugin更改安裝低版本 v1.12。
第四步，卸載當前安裝的compression-webpack-plugin：npm uninstall --save-dev compression-webpack-plugin
第五步，安裝低版本compression-webpack-plugin：npm install --save-dev compression-webpack-plugin@1.1.2
第六步，再次運行 npm run build打包項目，這時將正常包vue項目，愉(ku)快(bi)的將vue開發上線了。
第七步，開啟 nginx 服務端 gzip性能優化。找到nginx配置文件在 http 配置里面添加如下代碼，然后重啟nginx服務即可。
http:{
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg
image/gif image/png;
}
總結一下，vue開啟gzip性能優化主要分為兩部分，成功開啟后將大大優化vue首頁加載時長。
實際操作
vue.config.js
