vue-路由懒加载

　　上一篇说过，vue-cli对打包的文件进行分类，在浏览器进行读取时减少了一定的压力

 

 　　如果在大型的Vue项目中，mainfest和vendor可能并不会占太大的空间，可app是我们写业务代码的地方，很大概率会出现太大业务代码在这个文件的情况。因此能不能把这里面的某些代码给抽取出来放在其他的JS文件里呢？下面路由的懒加载就能实现了

　　路由的懒加载是说：当使用到这个路由对应的组件时，才去服务器上读取。

　　这时候可能有人会问：这个跟抽取app中的代码有什么关系？是这样的，本来app中关于路由对应组件的代码被抽离出来，一个路由对应组件会抽离成一个JS文件，有多少个路由映射规则就意味着多少个JS文件。一来就分担了app.xxx.js的代码量，二来也不用加载全部的路由对应组件的JS代码，等使用的时候才读取。

　　那如何实现路由的懒加载？做法特别简单，只需要将之前的导入组件的写法做一个变更即可，如下：

const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')
const User = () => import('../views/User.vue')

const routes = [
  {
    path: '/',
    name: 'portal',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/user/:userId',
    name: 'User',
    component: User
  }
]