背景：
使用vue + iview搭建的一個后台管理系統，路由已經用了懶加載，加載登陸頁面，居然還是需要18S左右，剛到一個新公司，項目經理很委婉的說，看看能不能優化了一下。然后就開始了網上一大堆'vue首屏加載'的搜索...
經過初步優化，終於加載從開始的15S多到現在的不到4S，且看一步一步來...
性能測試工具： Pingdom
https://tools.pingdom.com/
優化具體做法：
項目可能因情況而定，未做優化之前，我的加載情況是這樣的：
很顯然：加載時間最耗時的是背景圖片，vendor.js和app.js過大。
步驟一：優化圖片
整個屏幕的背景圖片，PNG格式會很大，自己用PS改成了jpg格式，居然只有45KB，其實改了之后，畫質差別真的不大，但是時間會少了很多
從兩張圖對比得知，一個圖的優化，直接可以減少5S的下載時間。
步驟二：讓后台開啟gzip：
一般情況下，性能能提高30% -- 80% 左右
目前不支持圖片和字體的壓縮
可以從圖中明顯看到：vendor.js直接哦才能夠940KB，縮小到了700KB，app.js從327KB縮小到了228KB，大小減少接近1/3。
補充：gzip_static 生效的前提是nginx開啟了gzip_static壓縮並且請求目錄下存在名稱相同且以.gz 結尾的文件。
使用 gzip_static 壓縮的話要先准備好壓縮后的 gz 文件，並且服務器會消耗更多的空間來存儲壓縮文件和原文件，這個有利有弊要自己衡量。
步驟三：使用CDN加載資源
在vue項目中，通過npm安裝到工程中所有的js,css文件，在編譯時都會被打包進vendor.js，瀏覽器在加載該文件后才開始顯示首屏。
我們先來試試更換Vue，vue-router的加載方式，先看結果
從結果看出，當Vue,vue-router從CDN加載時，vendor.js直接又少了111KB。然后按照這種方法，axios，iview我也只用CDN方式加載
代碼只需要改動的地方：
1），index.html加載CDN資源 :
2），公共配置項webpack.base.conf.js：
按照官方文檔的解釋，如果我們想引用一個庫，但是又不想讓webpack打包，並且又不影響我們在程序中以CMD、AMD或者window/global全局等方式進行使用，那就可以通過配置externals。具體自行百度。。。
##### 3），跟改vue，vue-router,axios,iview的引入方式：
main.js中 注釋掉
// import Vue from 'vue'，
// import iView from 'iview';
// import '../theme/index.less';
其他的一切照舊，照樣可以使用Vue.use()
vue-router和axios中是一樣的
到此，去看加載請情況
最后附上結果
最后解答幾個問題，是我在網上看到別人問的
1，使用CDN方式加載vue-router , 懶加載一樣可以，且不需要改動任何東西，以前是懶加載，優化之后依然是
2，ivew使用變量覆蓋方式更換主題就不行了，要嘗試另外一種安裝工具修改
3，一個小提示，每次更改了webpack文件中的配置后，別忘了重新npm start