路由懒加载和组件的懒加载

为什么使用懒加载

为了客户更好的体验，首屏组件加载速度更快，解决白屏的问题

定义

懒加载简单的来说就是延迟或按需加载，即在需要的额时候进行加载

使用

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异步组件实现懒加载、es6提出的import 方法

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))
    }
  ]
})

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
    }
  ]
})

组件懒加载

使用

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

AMD异步方法

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