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文件，这样在页面访问的时候就不会出现全部路由文件被同时加载的问题了。