vue中路由懒加载

一、什么是路由懒加载，为什么要使用路由懒加载？
懒加载简单来说就是延迟加载或按需加载，也可以理解为在需要的时候在进行加载，像vue这种单页面的应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

二、懒加载的使用。
常用的懒加载方式有两种：即使用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异步组件实现懒加载

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方法，（最常用的）
不加 { } ，表示直接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
  }
 ]
})

菜鸟小编一枚，希望对大家有所帮助~