頁面懶加載。
本篇文章的demo code可以在這邊查看:
懶加載的功能
訪問頁面時才加載頁面，而不是一進入頁面就全部先載進來。
為何要懶加載
透過webpack打包檔案，最後會將所有頁面生成一個js，
頁面一多，這個js就會很大，延遲載入的速度，
對於使用者的體驗來說就會扣分。
以前面專案為例，
先看一下原本全部載進來時的檔案資訊，
這張圖是載入首頁後依序點擊cat2、cat3、catAll後的資料：
懶加載實做：
把原本引入的import改為宣告const的方式
(改不需要第一時間引入的那些檔案)
Ex.
import cat2 from '../views/cat2.vue'
改為
const cat2 = () => import('../views/cat2')
注意這邊import就沒有特別加副檔名.vue了
再次打包後會發現dist之中多了幾個數字開頭的js檔案，
0.bundle.js
1.bundle.js
視有幾個檔案被懶加載而定。
這些就是被懶加載分開的js檔案了。
一樣載入首頁後依序點擊cat2、cat3、catAll：
觀察圖片可以發現現在變成：當點擊該頁面，才載入相對應的bundle.js。
目前因為頁面很少內容也很簡單，看起來大小上沒什麼差別XD
不過這些就是頁面懶加載的精隨啦。
參考資料