vue 为什么需要路由懒加载以及路由懒加载的方式

在终端 npm run build 后，vue项目中会生成一个 dist文件夹 ，它包含一个 js文件夹，里面有 app.js、vendor.js、manifest.js 文件，分别装的是业务逻辑代码、第三方提供商代码（框架等）、底层支撑代码（比如一系列底层环境）。

 因为随着项目的开发推进，业务逻辑代码会越来越多，所以上述的业务逻辑代码文件，即 app.js文件 也会越来越大。当用户打开这个网站的时候，很可能会因为请求的文件过大而等待时间过长。为了避免这种情况，我们需要懒加载。

用户常常看到的只是业务逻辑的一部分，而不是全部，我们先将app.js文件进行拆分。

这里对app.js文件里面路由相关的代码进行拆分，即将一个个的路由组件从 app.js 的代码中拆分出来。如下图所示，使用这几种方法，即可使得路由部分的业务逻辑单独成为一个与app.js文件并列的js文件。

因此，用户打开这个网站的时候，就不会一下子把所有资源都请求下来了，而是可以先请求当前路由部分的代码了。

 router/index.js 文件如下

import Vue from 'vue'
import Router from 'vue-router'

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


Vue.use(Router)
const routes = [{
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  }, {
    path: '/about',
    component: About
  }, {
    path: '/user/:userId',
    component: User
  }
]

export default new Router({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

 下图为使用路由懒加载后dist文件夹中的情况，可见拆分出来了3个组件的js文件