在用Vue2 框架進行單頁面開發時，開發完成后項目打包到線上環境，發現vendor腳本有963K，app.css文件也有四百多k，用戶第一次打開網頁加載這兩個文件要十多秒，會使頁面白屏十多秒，之后再次加載由於js和css有緩存，所以速度明顯提升，但是初次加載時明顯用戶體驗很差，該如何解決初次加載vendor.js和app.css慢的問題呢？是網速太慢的問題嗎？按照道理來說，按現在的網速幾百kb的腳本加載也是分分鍾的事情啊，比如我們隨便打開一首歌也要幾兆，加載也不至於白屏十多秒啊，於是，我們隨便打開一個網頁F12調試，如圖不難看出打開一個tab網頁，js,css,html就會由瀏覽器UI渲染的線程專門負責頁面渲染的，線程執行是並發執行的，所以圖片，js腳本，樣式css之間的加載也都是交替加載的。
總結如下原因：
原因1：由於vendor.js和app.css較大，UI渲染線程並不會優先加載他倆，但是VUE等主流的單頁面框架都是js渲染html body的,所以必須等到vendor.js和app.css加載完成后完整的界面才會顯示。
原因2：還有一個原因就是單頁面首次會把所有界面和接口都加載出來，會有多次的請求和響應，數據不能馬上加載
二者相加所以會有長時間的白屏。
解決方案
1、懶加載
原因2處理相對簡單先說原因2，對於單頁面web應用，一般采用懶加載，我們初次只需要加載渲染必要的HTML主頁，后續加載通過用戶操作觸發，這樣就避免了初次加載渲染全部的html，也必不會一開始就去請求所有的接口，把路由修改成這樣子的就好了，不會的可百度vue-router懶加載，有很多文章
2、gzip壓縮和cdn加載
解決原因2后我們發現加載並不一定會太快，因為vendor.js和app.css還是相對較大，我們如何變小他
1，gzip壓縮，個人感覺這是最簡單粗暴而且有效的優化方案
服務端配置：配置nginx服務器 nginx.conf文件，在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;
gzip_types后面的內容表示壓縮文件的類型，需要把你要壓縮的所有文件類型寫上去，還要考慮文件類型支持問題。我就遇到了文件類型問題，一開始我並沒有加入application/javascript，運行時發現文件並沒有壓縮，后來查閱資料嘗試加入application/javascript就成功了。 我們看到有很多javascript，application/x-javascript，application/ javascript，text/javascript，這幾個的關系引用一位網友的解釋，
避免出現有些類型不支持的問題，我們最好把它們都配置上。
前端代碼配置： config/index.js文件下面的productionGzip屬性改為true
安裝 compression-webpack-plugin：
npm install compression-webpack-plugin --save-dev
前后端配置都OK了后運行npm run build 發布，我當時運行報錯了，報錯：Compression Plugin Invalid Options，是由於版本的問題，打開package.json，找到對應文件改為較低版本，然后重新安裝就OK了。打包后我這邊兩個文件明顯比之前的九百多kb明顯小了幾倍，加載速度當然也會快很多了。
2，cdn加載優化
原理就是把vue,vue-router,vuex等等你用到的相關庫不打包到vendor文件中，而用cdn加載，這樣也會減少vendor的大小
可以參考這篇文章：http://www.cnblogs.com/Fordestiny/p/8684556.html