1、 Why use routing lazy loading
In order to give customers a better customer experience, the first screen component loads faster and solves the white screen problem.
2、 Definition
Lazy loading simply means delayed loading or on-demand loading, that is, loading when needed.
3、 Use
There are two common lazy loading methods: using Vue asynchronous components and importing in ES
1. Lazy loading is not used, and the routing code in Vue is as follows
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. Lazy loading of Vue asynchronous components
The method is as follows: component: resolve = > (require (‘address of the route to be loaded ‘], resolve)
import Vue from 'vue'
import Router from 'vue-router'
/*The previously imported HelloWorld module is omitted here*/
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve=>(require(["@/components/HelloWorld"],resolve))
}
]
})3. The import method proposed by es, (—- most commonly used —–)
The method is as follows: const HelloWorld = () = > Import (‘address of module to be loaded ‘)
(without {}, it means return directly)
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
}
]
})
4、 Component lazy loading
Same as route lazy loading,
1. Written in the original component
<template>
<div>
<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 method
<template>
<div>
<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. Asynchronous method
<template>
<div>
<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>
5、 Summary:
There are two common lazy loading methods for routing and components:
1. Implementing lazy loading of route by Vue asynchronous component
Component: resolve = > ([‘address of route to be loaded’, resolve])
2. ES (this method is recommended)
Const HelloWorld = () = > Import (‘address of module to be loaded ‘)
Classification: Vue