路由懒加载及其实现

所谓的 路由懒加载 ，其实就是 延时加载，在需要它的时候才进行加载。

那为什么要进行路由懒加载呢？

我们在路由中通常会定义很多不同的页面，如果不应用懒加载技术的话，打包构建应用时，包会很大，第一次加载时会把所有的组件以及相关资源全部都加载了，这会加载过多暂时不需要的资源，导致速度变慢，用户体验降低的问题。
也就是，一开始加载时不要一次性把资源都加载完，而是在需要时加载相应的资源

所以总结来说，路由懒加载做了以下事情：

1、主要作用是 将路由对应的组件打包成一个个的JS代码块
2、只有 在这个路由被访问到的时候，才加载对应的组件，否则不加载

那如何实现路由懒加载呢？

Vue项目实现路由按需加载（懒加载）的三种方式：

1. Vue异步组件

2. ES6的 import()

3. webpack的 require.ensure()

1、Vue异步加载

我们使用vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，这时一个组件会生成一个js文件

component: resolve => require(['放入需要加载的路由地址'],resolve)

例如：

  { 
      path: '/problem',
      name: 'problem',
      component: resolve => require(['../pages/home/problemList'], resolve)
   }

1. ES6的import() --- 推荐

1： 直接将组件引入的方式，import是ES6的一个语法标准，如果需要浏览器兼容，需要转化成es5的语法。
2： 推荐使用这种方式，但是注意wepack的版本>2.4
3：vue官方文档中使用的也是import实现路由懒加载
4：上面声明导入，下面直接使用

const 组件名 = () => import('组件路径')

例子：

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({
    routes: [
        {path:'/Foo',name:'Foo',component:Foo},
        {path:'/Aoo',name:'Aoo',component:Aoo},
    ]
})

上面代码中，webpackChunkName值相同的会打包成一个js文件

3、Webpack提供的require.ensure()实现懒加载

1：vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
2：这种情况下， 多个路由指定相同的chunkName，会合并打包成一个js文件。
3：require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。
4： 第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。
5： 第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。
6： 第三个参数是错误回调。
7： 第四个参数是单独打包的chunk的文件名

const list = resolve => require.ensure([],()=>resolve(require('组件地址')),'list')

例子：

const  Coo = resolve=>{
 require.ensure([],()=>{resolve(require('@/components/List'))})
}
 
...
{path:'/list',name:'List',component:Coo}