vue-router懶載入解決首次載入時資源過多導致的速度緩慢問題
阿新 • • 發佈:2019-01-07
懶載入:也叫延遲載入,即在需要的時候進行載入,隨用隨載。
像vue這種單頁面應用,如果沒有應用懶載入,運用webpack打包後的檔案將會異常的大,造成進入首頁時,需要載入的內容過多,時間過長,會出啊先長時間的白屏,即使做了loading也是不利於使用者體驗,而運用懶載入則可以將頁面進行劃分,需要的時候載入頁面,可以有效的分擔首頁所承擔的載入壓力,減少首頁載入用時。
簡單的說就是:進入首頁不用一次載入過多資源造成用時過長!!!
懶載入的方式:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//採用了懶載入
export default new Router({
routes: [
{
path:'/',
component:resolve => require(['@/components/index'],resolve)
}
]
})
非懶載入的方式:
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)
export default new Router({
routes: [
{
path:'/' ,
component:index
}
]
})