Vue.js項目性能優化和開啓Gzip壓縮

打包vue的項目部署到服務器下時，發現初次加載特別的緩慢，將近10s頁面才加載出來，徹底沒有開發環境上的那麼流暢。主要緣由是頁面在打包後若是不進行相關配置會致使資源文件特別的大，一次想要所有加載完成會特別的耗時。這裏簡單總結一下本身用到的一些優化的方案。 

1．去掉編譯文件中map文件。 在編譯好後，咱們會看到文件夾下有特別多的.map文件，這些文件主要是幫助咱們線上調試代碼，查看樣式。因此爲了不部署包過大，一般都不須要生成這些文件。 

在 config/index.js 文件中將productionSourceMap 的值設置爲false. 再次打包就能夠看到項目文件中已經沒有map文件。  

2．vue-router 路由懶加載 懶加載即組件的延遲加載，一般vue的頁面在運行後進入都會有一個默認的頁面，而其餘頁面只有在點擊後才須要加載出來。使用懶加載能夠將頁面中的資源劃分爲多份，從而減小第一次加載的時候耗時。 

懶加載路由配置：

非懶加載路由配置：

以下圖所示爲經過懶加載後打包的js文件。而非懶加載的打包後通常只有一個

app.js文件。

3．使用CDN加載 

在打包後發現vendor.js 文件佔用內存特別大，這裏面主要是使用的一些第三方庫，例如 vuex,vue-router,axios，elementUI 等文件 

咱們除了在使用過程當中單個組件引用，還可使用CDN 加載。 

經過在index.html 中直接引入第三方資源來緩解咱們服務器的壓力，其原理是將咱們的壓力分給了其餘服務器站點。  

4．使用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 readproperty 'emit' of undefined。據我查證，是安裝的compression-webpack-plugin依賴有問題，須要卸載compression-webpack-plugin更改安裝低版本

v1.12。

卸載當前安裝的npm uninstall --save-dev compression-webpack-plugin

安裝低版本npm install --save-dev compression-webpack-plugin@1.1.2

再次運行npm run build打包項目，這時將正常包vue項目，愉快地將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;}複製代碼

本人創業團隊產品MadPecker，主要作BUG管理、測試管理、應用分發
網址:www.madpecker.com，有須要的朋友歡迎試用、體驗！本文爲MadPecker團隊技術人員編寫，轉載請標明出處