為給客戶更好的客戶體驗(yàn)纷闺，首屏組件加載速度更快一些算凿，解決白屏問題份蝴。懶加載簡(jiǎn)單來說就是延遲加載或按需加載，即在需要的時(shí)候的時(shí)候進(jìn)行加載氓轰。常用的懶加載方式有兩種：即使用vue異步組件?和?ES中的import?
1.未使用懶加載和使用異步組件懶加載? 方法：component: resolve=>(require(['地址']), resolve)
? ? ? ?import Vue from'vue'婚夫；
? ? ? ?import Router from'vue-router' ；
? ? ? ?import HelloWorld? ? from'@/components/HelloWorld' 署鸡；
? ? ? ?Vue.use(Router)案糙；
? ? ? ?export defaultnew Router({
? ? ? ? ?routes: [
? ? ? ? ? {
? ? ? ? ? ? ? path: '/',
? ? ? ? ? ? ? name: 'HelloWorld',
? ? ? ? ? ? ? component:HelloWorld
? ? ? ? ? ?}
? ? ? ? ?]
? ? ? ?})
優(yōu)化，省略引入 hello-world 模塊?
import Vue from 'vue'
import Router from 'vue-router'/* 此處省去之前導(dǎo)入的HelloWorld模塊 */
Vue.use(Router)
export defaultnew Router({
? routes: [
? ? {
? ? ? path: '/',
? ? ? name: 'HelloWorld',
? ? ? component: resolve=>(require(["@/components/HelloWorld"],resolve))
? ? }
? ]
})
2.ES提出的import方法（最常用）方法：const HelloWorld = ()=>import('地址')
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const HelloWorld = ()=>import("@/components/HelloWorld")
export defaultnew Router({
? routes: [
? ? {
? ? ? path: '/',
? ? ? name: 'HelloWorld',
? ? ? component:HelloWorld
? ? }
]
})
原始寫法：
<One-com></One-com>1111
<One-com></One-com>1111
<One-com></One-com>1111
<One-com></One-com>1111
<One-com></One-com>1111
<One-com></One-com>1111
<template>
? <div class="hello">
? <One-com></One-com>
? 1111
? </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>
? 1111
? </div>
</template>
<script>
const One = ()=>import("./one");
export default {
? components:{
? ? "One-com":One
? },
? data () {
? ? return {
? ? ? msg: 'Welcome to Your Vue.js App'
? ? }
? }
}
</script>
異步寫法：
<template>
? <div class="hello">
? <One-com></One-com>
? 1111
? </div>
</template>
<script>
export default {
? components:{
? ? "One-com":resolve=>(['./one'],resolve)
? },
? data () {
? ? return {
? ? ? msg: 'Welcome to Your Vue.js App'
? ? }
? }
}
</script>
<One-com></One-com>1111
總結(jié)：
路由和組件的常用兩種懶加載方式
1.vue異步組件實(shí)現(xiàn)路由懶加載
component: resolve=>(['地址'], resolve)
2.es提出的import（推薦使用）
const HelloWorld = () => import('地址')
