原因
為給客戶更好的客戶體驗,首屏元件加載速度更快一些,解決白屏問題。
定義
懶加載簡單來說就是延遲加載或按需加載,即在需要的時候的時候進行加載。
使用
常用的懶加載方式有兩種:即使用vue異步元件 和 ES中的import
1、未用懶加載,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
}]
})
2、vue異步元件實作懶加載
方法如下:component:resolve=>(require([‘需要加載的路由的位址’]),resolve)
import Vue from 'vue'
import Router from 'vue-router'
/* 此處省去之前導入的HelloWorld子產品 */
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve=>(require(["@/components/HelloWorld"],resolve))
}
]
})
3、ES 提出的import方法,(------最常用------)
方法如下:const HelloWorld = ()=>import(‘需要加載的子產品位址’)
(不加 { } ,表示直接return)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
四、元件懶加載
相同與路由懶加載,
1、原來元件中寫法
<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>
2、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>
3、異步方法
<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>
五、總結:
路由群組件的常用兩種懶加載方式:
1、vue異步元件實作路由懶加載
component:resolve=>(['需要加載的路由的位址',resolve])
2、es提出的import(推薦使用這種方式)
const HelloWorld = ()=>import('需要加載的子產品位址')