常見的幾種SPA優化方式
-
減小入口文件體積
-
靜態資源本地緩存
-
開啟GZip壓縮
-
使用SSR
.....
-
減小入口文件體積，常用的手段是路由懶加載，開啟路由懶加載之后，待請求的頁面會單獨打包js文件，使得入口文件index.js變小，開啟懶加載之后，js是這樣請求加載的：
2. 靜態文件本地緩存有兩種方式
-
HTTP緩存，設置Cache-Control，Last-Modified，Etag等響應頭，很多文章講的比較詳細，推薦：https://www.cnblogs.com/chinajava/p/5705169.html
-
Service Worker離線緩存，缺點：需要在HTTPS站點下，推薦：http://lzw.me/a/pwa-service-worker.html
而開啟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之前！