常見的幾種SPA優化方式
減小入口檔案體積
靜態資源本地快取
開啟GZip壓縮
使用SSR
.....
減小入口檔案體積，常用的手段是路由懶載入，開啟路由懶載入之後，待請求的頁面會單獨打包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之前！