這次帶給大家vue-router懶載入優化載入速度,vue-router懶載入優化載入速度的注意事項有哪些,下面就是實戰案例,一起來看一下。
懶加載:也叫延遲加載,即在需要的時候進行加載,隨用隨載。
像vue這種單頁應用,如果沒有應用懶加載,運用webpack打包後的文件將會異常的大,造成進入首頁時,需要加載的內容過多,時間過長,會出啊先長時間的白屏,即使做了loading也是不利於用戶體驗,而運用懶加載則可以將頁面進行劃分,需要的時候加載頁面,可以有效的分擔首頁所承擔的加載壓力,減少首頁加載用時。
簡單的說就是:進入首頁不用一次載入過多資源造成用時過長! ! !
懶載入的方式:
1 2 3 4 5 6 7 8 9 10 11 12 | import Vue from 'vue'
import Router from 'vue-router'
Vue. use (Router)
export default new Router({
routes: [
{
path: '/' ,
component:resolve => require ([ '@/components/index' ],resolve)
}
]
})
|
登入後複製
非懶載入的方式:
1 2 3 4 5 6 7 8 9 10 11 12 | 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
}
]
})
|
登入後複製
ps :下面看下vue-router路由懶加載
用vue.js寫單頁面應用時,會出現打包後的JavaScript包非常大,影響頁面加載,我們可以利用路由的懶加載去優化這個問題,當我們用到某個路由後,才去加載對應的組件,這樣就會更加高效,實現代碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import Vue from 'vue'
import Router from 'vue-router'
Vue. use (Router)
export default new Router({
routes: [
{
path: '/' ,
component: resolve => require ([ 'components/Hello.vue' ], resolve)
},
{
path: '/about' ,
component: resolve => require ([ 'components/About.vue' ], resolve)
}
]
})
|
登入後複製
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
在Linux內正規使用技巧
vue-infinite-loading做出無限載入效果
以上是vue-router懶加載優化載入速度的詳細內容。更多資訊請關注PHP中文網其他相關文章!