vue項目首頁加載速度優化

凡是作SPA的項目，特別是移動端的SAP項目，首屏加載速度一定是一個繞不過去的話題。接下來我就咱們項目裏的一些實踐來作一下總結。但願拋磚引玉，若是各位有更好的方案，不吝賜教。

1: 針對第三方js庫的優化

咱們項目裏用到的第三方js庫主要有：vue, vue-router, vuex, axio, 咱們還用到了qiniu。你們知道這些依賴庫的js文件都會被一塊兒打包到vender那個js文件裏面，若是這些你的第三方依賴庫不少，很大的話，那就會致使vender這個文件很大，那首屏加載的速度確定會被拖慢。

針對這個問題咱們的解決方案是，用文檔的cdn文件代替，而不用打包到vender裏面去。具體的作法是：

1: 在index.html裏面引入依賴庫js文件

// index.html
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>

2: 去掉第三方js的import,由於在第一步已經經過script標籤引用進來了。

3: 把第三方庫的js文件從打包文件裏去掉

這一步的作法就是利用webpack的externals。具體作法就是在 build/webpack.base.conf.js文件的module裏面與rules同層加入externals：

2: 利用vue-router進行頁面的懶加載（lazy load）

這裏的頁面的懶加載是指，假如我如今訪問A頁面，只會去請求A頁面裏的東西，其餘頁面的東西不會去請求。
具體怎麼作，vue-router的官網都寫得很清楚了,有須要的去看一下就懂了：
經過vue-router實現頁面的懶加載

3: 圖片資源的壓縮
嚴格說來這一步不算在編碼技術範圍內，可是卻對頁面的加載速度影響很大，特別是對於移動端的項目來講。
對於非logo的圖片文件，讓UI設計師提供jpg格式的，不要用png.
對於全部的圖片文件，均可以在一個叫tinypng的網站上去壓縮一下。網址：
https://tinypng.com/

成果總結：經過以上的那些方案，再加上咱們的代碼原本就是部署在CDN上面的，咱們在移動端（微信，QQ，瀏覽器等）基本都能達到秒開的效果。