Vue route lazy loading and component lazy loading

Time:2022-1-7

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

Recommended Today

Proper memory alignment in go language

problem type Part1 struct { a bool b int32 c int8 d int64 e byte } Before we start, I want you to calculatePart1What is the total occupancy size? func main() { fmt.Printf(“bool size: %d\n”, unsafe.Sizeof(bool(true))) fmt.Printf(“int32 size: %d\n”, unsafe.Sizeof(int32(0))) fmt.Printf(“int8 size: %d\n”, unsafe.Sizeof(int8(0))) fmt.Printf(“int64 size: %d\n”, unsafe.Sizeof(int64(0))) fmt.Printf(“byte size: %d\n”, unsafe.Sizeof(byte(0))) fmt.Printf(“string size: %d\n”, […]