vue-router 路由懒加载

1、     通常在我们使用 vue-cli 构建项目时，在默认情况下 执行npm run build 后会将项目中所有的 js 代码打包为一个整体。而且这个包体积会非常的大。导致我们在进入首页时会加载的非常慢。即使初始化有 loading 效果，也不利于用户体验。

所以这是就体现出 懒加载(延迟加载) 的重要性。所谓懒加载就是 把不同路由对应的不同组件分割成不同的代码块。

这样可实现将页面进行划分，需要的时候再去加载，从而到达减少初始页面的加载压力。

2、     懒加载方法(两种方法)

(1）es6提出的import（推荐）

举例：
    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)

    const Hello = ()=>import("@/components/Hello")

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Hello',
          component:Hello 
        }
      ]
    })

(2) vue异步组件实现懒加载 

写法： component:resolve =>require(["需要加载的模块"],resolve)

第一个参数：需要加载的模块 ，第二个参数：加载成功的参数