Vue的路由懒加载

　　Vue的一个重要原则就是SPA（single-page application），这就导致了我们编写项目时一般是分为不同的模块进行编写，最后使用VueRouter来进行页面间的跳转。而当我们的组件越来越多，页面越来庞大的时候也会带来页面加载速度的缓慢，有时候打开一个页面需要几秒甚至十几秒的时间，这样的速度应该是不能被容忍的。

　　那为什么会出现这样的情况呢？出现这样的情况应当怎样解决呢？我们知道页面之所以能够进行跳转，是由于Vue-router的存在，当你在网址输入相对应的url后，Vue-router会跟据路由中所存在的地址信息进行匹配。当匹配到相对应路径或别名后Vue就会将相对应的页面显示出来。

　　当我们的组件越来越多的时候，路由文件也会越来越大。而每次Vue打包的时候会将所有路由文件中所指定的页面全部集合到一起，也就是说一个路由文件中假如包含了十个.vue文件，打包的时候webpack会将这十个.vue文件全部打到一个js文件中去，而当这十个其中一个页面被加载时，其余九个.vue文件也会被随之加载。这就是为什么当组件越来越多时，页面加载速度缓慢的原因。下图是未使用懒加载时，项目打包情况和各个文件大小：

　　这时候我们引用各个文件的写法是这样的：

import Manager from '@/components/common/manager/index'
import APPImprove from '@/components/common/manager/appImprove'
import tsmImprove from '@/components/common/seniorManager/appImprove'
import managerApp from '@/components/common/manager/app'
import managerCert from '@/components/common/manager/cert'
import addApp from '@/components/common/manager/addApp'
import editApp from '@/components/common/manager/editApp'
import appDevice from '@/components/common/manager/appDevice'

　　这样的写法会导致此路由文件下所有的文件都会被打到一个.js文件中，我们如果要使用路由懒加载的话就需要使用另外一种的写法：

const Manager = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/index.vue");
const APPImprove = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/appImprove.vue");
const tsmImprove = () => import(/* webpackChunkName: "Manager" */ "@/components/common/seniorManager/appImprove.vue");
const managerApp = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/app.vue");
const managerCert = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/cert.vue");
const addApp = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/addApp.vue");
const editApp = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/editApp.vue");
const appDevice = () => import(/* webpackChunkName: "Manager" */ "@/components/common/manager/appDevice.vue");

　　在动态import()代码处添加注释webpackChunkName告诉webpack打包后的chunk的名称（注释中的内容很重要，不能省掉）

　　这时候我们再看项目各文件的大小：

 

　　可以看到原本很大的js文件被分割成很小的js文件，这样在页面访问的时候就不会出现所有路由文件被同时加载的问题了。