對於vue這樣的單頁應用,如果沒有懶加載的話,webpack打包的文件會特別大,導致進入首頁要加載的內容太多,會導致長時間的黑屏。即使加載了,也不利於用戶體驗。而使用懶加載可以對頁面進行劃分,在必要的時候加載頁面,可以有效分擔主頁所承受的加載壓力,減少主頁的加載時間。
簡單來說:不壹次性加載太多資源,進入首頁時間太長!!!
惰性加載模式:
從“vue”導入Vue
從“vue路由器”導入路由器
Vue.use(路由器)
//采用懶加載。
導出默認新路由器({
路線:[
{
路徑:“/”,
component:resolve = & gt;要求(['@/components/index'],解析)
}
]
})非延遲加載模式:
從“vue”導入Vue
從“vue路由器”導入路由器
從“@/components/index”導入索引
Vue.use(路由器)
導出默認新路由器({
路線:[
{
路徑:“/”,
組件:索引
}
]
})ps:我們來看看vue-router路由的懶加載。
用vue.js寫單頁面應用時,打包的JavaScript包會很大,影響頁面加載。我們可以利用路由的惰性加載來優化這個問題。當我們使用壹個路由時,我們會加載相應的組件,這樣效率會更高。實現代碼如下:
從“vue”導入Vue
從“vue路由器”導入路由器
Vue.use(路由器)
導出默認新路由器({
路線:[
{
路徑:“/”,
component:resolve = & gt;要求(['components/Hello.vue'],解析)
},
{
路徑:“/about”,
component:resolve = & gt;要求(['components/About.vue'],解析)
}
]
})相信看完這個案例,妳已經掌握了方法。更多精彩請關註Gxl上其他相關文章!
推薦閱讀:
從頭開始使用React路由器v4。
如何使用JS動態添加HTML標簽