基於Vue的SPA如何優化頁面加載速度

常見的幾種SPA優化方式

• 減少入口文件體積

• 靜態資源本地緩存

• 開啓GZip壓縮

• 使用SSR

.....

1. 減少入口文件體積，經常使用的手段是路由懶加載，開啓路由懶加載以後，待請求的頁面會單獨打包js文件，使得入口文件index.js變小，開啓懶加載以後，js是這樣請求加載的：

2. 靜態文件本地緩存有兩種方式

• HTTP緩存，設置Cache-Control，Last-Modified，Etag等響應頭，不少文章講的比較詳細，推薦：www.cnblogs.com/chinajava/p…

• Service Worker離線緩存，缺點：須要在HTTPS站點下，推薦：lzw.me/a/pwa-servi…

而開啓GZip壓縮和使用SSR原理都比較簡單，咱們很容易想到這兩種方式是如何提升頁面加載速度的。

可是除了上面幾種方式，另一種優化方案也不容小覷，這也是我在近期項目開發中使用並理解到的。咱們先說說一般項目中是如何加載頁面數據：Vue組件生命週期中請求異步接口，在mounted以前應該均可以，據我瞭解絕大部分同窗是在mounted的時候執行異步請求。可是咱們能夠把頁面須要的請求放到Vue-Router的守衛中執行，意思是在路由beforeEnter以前就能夠請求待加載頁面中全部組件須要的數據，此時待加載頁面的Vue組件還沒開始渲染，而Vue組件開始渲染的時候咱們就能夠用Vuex裏面的數據了。

以上方法的實現思路：

圖意：每一個頁面（Page）中都會有不少個Vue組件，能夠在Vue組件中添加自定義屬性fetchData，fetchData裏面能夠執行異步請求（圖中執行Vuex的Action），可是咱們怎麼獲取到全部組件的fetchData方法並執行呢？如圖所示，在router.beforeResolve守衛中，咱們看看router.beforeResolve的定義，全部組件內守衛和異步路由組件被解析以後，解析守衛就被調用，意思是即便頁面中有異步組件，它會等待異步組件解析以後執行，而且解析守衛在beforeEnter以前執行。那咱們怎麼在解析守衛中獲取到待加載頁面的全部組件呢？經過router.getMatchedComponents方法。

完整實例：

這樣咱們就能夠在解析守衛中獲取到全部待加載組件的fetchData方法並執行，這樣無疑會在組件開始渲染以後獲取到全部數據，提升頁面加載速度。

不少人可能有個疑問，若是異步請求放在beforeCreate和created不是同樣嗎？答案是否認的，由於這種方式能夠將異步請求放到beforeCreate以前！