vue的路由懶加載

路由懶加載官方介紹

---

非懶加載寫法：

import Login from '@/components/Login'

全部路由涉及到的文件會被打包到 app.xxx.js 中

懶加載寫法：

const Login = () => import('@/components/Login')

---

這裏要擴展說明的是 把組件按組分塊：

const Login = () => import(/* webpackChunkName: "group-index" */ '@/components/Login')

這樣去寫的話，那麼 webpackChunkName: "group-index" 的全部路由組件就會被打包到一塊兒，如 0.faxxx.js，若是有多個組，那麼就是依次 1.xxx.js，2.xxx.js。 比方說 用戶相關的路由爲一組，設置相關的路由爲一組等，打包完成後的打印日誌能看到每一個組對應的js文件：

這樣的話，首屏加載的時候就不會一次性下載全部路由文件，而是根據當前頁面下載對應的文件，等到用戶首次跳轉到另外一個路由組的時候再進行下載。

好比 編譯後，我首次加載主頁，那麼會下載 group-index 對應的路由文件資源，以後跳轉用戶列表頁，再下載 group-user 路由文件資源。

這樣的話初始化的時候會比以前稍微快些，由於首次加載少下載了一些資源。

但反作用就是，當你跳轉到新的分組頁面的時候，會卡那麼一下，由於須要等待下載路由文件資源，等待時間根據用戶網路和當前路由文件資源大小決定，因此路由文件組的分割須要開發者本身進行判斷。

我的建議打包後若是超過1M了能夠考慮拆分一下，網速慢的話可能下載須要1~2s時間。

原文出處：https://www.cnblogs.com/cielsys/p/10457945.html