路由懒加载也可以叫做路由组件懒加载，最常用的是通过import()来实现它。
//route/index.js
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
然后通过Webpack编译打包后，会把每个路由组件的代码分割成一一个js文件，初始化时不会加载这些js文件，只当激活路由组件才会去加载对应的js文件。
我们使用vuecli创建项目时，默认就配置路由懒加载，启动工程，打开网页，打开开发者工具的network发现：
app1.png
可以看到在Home路由的时候，初始化加载了这么多文件，其中我们重点关注app.js为98.2kb
然后我们切换到About路由
app1.png
可以看到，切换到About路由时，又加载了about.js，且size为预取缓存
然后再查看Elements发现：
app1.png
about.js是在浏览器空闲时下载，当切换about路由时才加载about.js
当我们取消路由懒加载
import About from '../views/About.vue'
...
{
path: '/about',
name: 'About',
component: About
}
...
app1.png
对比发现比懒加载多了几kb，别看只有几kb，当项目越做越大，app.js只会越大，差距也会越大
由此可见路由懒加载是非常有必要的一个性能优化选项。
