解密Vue路由懒加载

前言
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

常见的路由懒加载方式

1. Promise()方式
   可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

2. 动态的import语法来按需获取组件

import('./Foo.vue') // 返回 Promise

3. 结合两者的特性
   结合这两者我们就可以通过一个箭头函数来按需获取所需路由组件实现懒加载

const Foo = () => import('组件的地址')
//例如：
const HelloWord = () => import('@/pages/component/helloWord.vue')
// 使用路由
const router = [{path:'/helloword',name:'helloWord',component:helloWord}]

4. 总结
   路由懒加载的实现方式主要是利用Promise对象和Webpack打包时的特性（webpack在打包项目的时候会根据你的配置文件将项目进行模块划分），
   利用箭头函数成功将不同的路由组件划分成为不同的模块，实现按需引入，不需要一次性全量加载，优化性能，降低首屏加载的时延