vue 路由懒加载（延时加载、按需加载）

import和require的区别

node编程中最重要的思想就是模块化，import和require都是被模块化所使用。

遵循规范
require 是 AMD规范引入方式
import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
调用时间
require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头
本质
require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require。

使用懒加载的原因：

像vue这种（spy）单页面应用，如果没有使用到懒加载，webpack打包的文件过大，造成进入首页时，加载的资源过多，时间过长，即使做了loading也不利于用户体验，而运用懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载事件，简单来说就是进入首页不用一次加载过多资源造成时间过长。

懒加载使用的方法：

1、ES 提出的import方法，（------****最常用------）方法如下：const HelloWorld = （）=>import(‘需要加载的模块地址’)

（不加 { } ，表示直接return）

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
const HelloWorld = () => import("@/components/HelloWorld") 
const HelloWorld = () => import('../components/HelloWorld') //推荐这种 简洁直观
export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

2、vue异步组件实现懒加载方法如下：component：resolve=>(require([‘需要加载的路由的地址’])，resolve)

import Vue from "vue";
    import VueRouter form "vue-router";
    Vue.use(VueRouter);
    
    export default new Router({
    
    
          mode:"history",
          routes:[
               {
    
    
                  path: '/',
                  name: 'HelloWorld',
                  component: resolve=>(require(["../components/HelloWorld"],resolve))
               },
               {
    
    
                  path:'/Aboutus', //有children的不写name
                  meta: {
    
    
                      title: '关于我们'
              },
                  children:[
              {
    
    
                  path:'', //默认子路由 name写在默认子路由
                  name:'Aboutus',
                  component:resolve=>(require(["../components/Study"],resolve))
              },
              {
    
    
                  path:'/Study',
                  name:'Study',
                  component:resolve=>(require(["../components/Study"],resolve))
              },
              {
    
    
                  path:'/Work',
                  name:'Work',
                  component:resolve=>(require(["../components/Work"],resolve)),
                  meta:{
    
    
                    title:'work'
              }
            },
        
          ],
              component:Aboutus
            },
              
          ]
      })

3、使用webpack特有的require.ensure()。注：require.ensure 是 Webpack 的特殊语法，用来设置 code-split point

例：components: r => require.ensure([], () => r(require(’@/components/Three’)), ‘group-home’)

’group-home’是把组件按组分块打包, 可以将多个组件放入这个组中，在打包的时候Webpack会将相同 chunk 下的所有异步模块打包到一个异步块里面。

const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home');
const routers = [
    {
    
    
        path: '/',
        name: 'index',
        component: Index
    }
]

4、把组件按组分块
有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。