vue routing lazy loading and lazy loading components

vue routing lazy loading and lazy loading components: https://www.cnblogs.com/-roc/p/9983177.html

First, why should use the route lazy loading

　　To give the customer a better customer experience, the first screen assembly loading speed faster, solve the problem of black and white.

Second, the definition

　　Lazy loading is simply lazy loading or loaded on demand, that is, when loaded when needed.

Third, the use

　　There are two common lazy loading: i.e. using vue asynchronous component and the ES import

1, not loaded with lazy, routing code below 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 asynchronous implemented lazy loading assembly

　　　　As follows: component: resolve => (require ([ 'routing address to load']), resolve)

Vue from Import 'VUE' 
Router from 'VUE-Router' Import 　before / * omitted here introduced HelloWorld module * / 
Vue.use (Router) 
Export new new default Router ({ 
  routes: [ 
    { 
      path: '/', 
      name : 'the HelloWorld', Component: Resolve => (the require ([ "@ / Components / the HelloWorld"], Resolve)) 
    } 
  ] 
})

3, import method proposed by ES, ( ------ The most common ------)

　　　　As follows: const HelloWorld = () => import ( 'module address to load')

　　　　(Without the {} represents a direct 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
    }
  ]
})

Fourth, the components lazy loading

The same route lazy loading,

1, originally written in assembly

<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 method

<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, asynchronous method

<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>

V. Summary:

Commonly used two kinds of routing and lazy loading components:

. 1, VUE asynchronous component to implement routing lazy loading

　　component: resolve => ([ 'load required routing address', resolve])

2, Import es proposed (recommended in this way)

　　const HelloWorld = () => import ( 'module address to load')

vue routing lazy loading and lazy loading components

Guess you like