路由 和 組件 的常用兩種懶加載方式:
1、vue異步組件實(shí)現(xiàn)路由懶加載
component:resolve=>(['需要加載的路由的地址',resolve])
2、es提出的import(推薦使用這種方式)
const HelloWorld = ()=>import('需要加載的模塊地址')
1. 路由懶加載
1.1 為什么要使用路由懶加載?
為給客戶更好的客戶體驗(yàn),首屏組件加載速度更快一些,解決白屏問題。
1.2 定義
懶加載簡(jiǎn)單來(lái)說(shuō)就是延遲加載或按需加載,即在需要的時(shí)候的時(shí)候進(jìn)行加載。
1.3 使用
未用懶加載,vue中路由代碼如下
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
vue異步組件實(shí)現(xiàn)懶加載
方法如下:component:resolve=>(require(['需要加載的路由的地址']),resolve)
import Vue from 'vue'
import Router from 'vue-router'
/* 此處省去之前導(dǎo)入的HelloWorld模塊 */
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve=>(require(["@/components/HelloWorld"],resolve))
}
]
})
ES 提出的import方法(------最常用------)
方法如下:const HelloWorld = ()=>import('需要加載的模塊地址')
(不加 { } ,表示直接return)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: ()=>import("@/components/HelloWorld")
}
]
})
webpack提供的require.ensure()
{
path: '/home',
name: 'Home',
component: r => require.ensure([],() => r(require('@/components/HelloWorld')), 'home')
}
2. 組件懶加載
原來(lái)組件中寫法
<template>
<div class="hello">
<One-com></One-com>
</div>
</template>
<script>
import One from './one'
export default {
components:{
"One-com":One
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
const方法
<template>
<div class="hello">
<One-com></One-com>
</div>
</template>
<script>
export default {
components:{
"One-com": ()=>import("./one");
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
異步方法
<template>
<div class="hello">
<One-com></One-com>
</div>
</template>
<script>
export default {
components:{
"One-com":resolve=>(['./one'],resolve)
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
如果本文對(duì)你有所幫助,感謝點(diǎn)一顆小心心,您的支持是我繼續(xù)創(chuàng)作的動(dòng)力!
最后:寫作不易,如要轉(zhuǎn)裁,請(qǐng)標(biāo)明轉(zhuǎn)載出處。