當前位置:成語大全網 - 書法字典 - vue-router懶的時候第壹次加載資源太多導致速度慢怎麽處理?

vue-router懶的時候第壹次加載資源太多導致速度慢怎麽處理?

這次給大家帶來的是vue-router懶加載第壹次如何處理資源太多導致速度慢的問題。vue-router懶加載第壹次處理資源太多導致速度慢有什麽註意事項?下面是壹個實際案例。讓我們來看看。

對於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標簽