路由 和 組件 的常用兩種懶加載方式：
1胜卤、vue異步組件實(shí)現(xiàn)路由懶加載
component：resolve=>(['需要加載的路由的地址'，resolve])
2玩徊、es提出的import(推薦使用這種方式)
const HelloWorld = （）=>import('需要加載的模塊地址')
1. 路由懶加載
1.1 為什么要使用路由懶加載僧叉？
為給客戶(hù)更好的客戶(hù)體驗(yàn)拌滋，首屏組件加載速度更快一些赞辩，解決白屏問(wè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)組件中寫(xiě)法
<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)力洲押！
最后：寫(xiě)作不易武花，如要轉(zhuǎn)裁，請(qǐng)標(biāo)明轉(zhuǎn)載出處杈帐。
