最近在看別人的專案的時候發現路由的另一種寫法，
什麼是路由懶載入，為什麼要用路由懶載入
路由懶載入就是當使用者需要的時候才載入相關元件，不需要的時候不會載入。像vue這種單頁面應用，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，時間過長，會出現長時間的白屏，即使做了loading也是不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用時。
實現理由懶載入的三種方式
第一種：非同步元件技術
/* vue非同步元件技術 */
,,
// 下面2行**，沒有指定webpackchunkname，每個元件打包成乙個js檔案。
/* const home = () => import('@/components/home')
const index = () => import('@/components/index')
const about = () => import('@/components/about') */
// 下面2行**，指定了相同的webpackchunkname，會合併打包成乙個js檔案。 把元件按組分塊
const home = () => import(/* webpackchunkname: 'importfuncdemo' */ '@/components/home')
const index = () => import(/* webpackchunkname: 'importfuncdemo' */ '@/components/index')
const about = () => import(/* webpackchunkname: 'importfuncdemo' */ '@/components/about')
, ,/* 元件懶載入方案三: webpack提供的require.ensure() */
, ,
vue路由懶載入及元件懶載入
一 為什麼要使用路由懶載入 為給客戶更好的客戶體驗，首屏元件載入速度更快一些，解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入，即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 1 未用懶載入，vue中路由 如下 import ...
vue路由懶載入
import vue from vue import vuerouter from vue router vue.use vuerouter var router new vuerouter routes name 登陸 path component resolve require.ensure r...
vue資料懶載入
需求 iview級聯元件載入本地區域資料時，由於資料量較大，壓縮後大概是153k，如果直接import引入資料，載入頁面的時候頁面會出現2到3秒的卡頓。解決辦法 在級聯元件觸發下拉事件的時候載入資料。如下 loadareadata catch error 這樣還是會有問題，就是修改回顯還是要載入，還...