vue学习笔记四：路由启用懒加载

前言

我们使用webpack来打包我们的vue项目，如果在配置路由的时候，没有启用路由懒加载，就需要把配置路由所需的组件都导入到路由文件中，并且在路由配置的时候显式调用，而且，如果没有使用懒加载的话，打包出来的文件可能会很大，影响我们首页的加载速度，下面就来看看启用懒加载与不启用懒加载的区别吧。

不用懒加载

下面两张图是我个人练习项目中router.js文件的部分路由配置，展示了在不启用路由懒加载的情况下，通常的路由配置情况。
注意：例子是基于vue-cli3.0脚手架搭建的。


当我们路由不启用懒加载的时候，我们看下webpack打包后的文件。

文件名中的一串串数字是生成的hash值，我们可以不用管，同时，.map后缀的文件我们也不用管

我们先来看下打包后的文件结构
app.js --------- 所有页面的业务逻辑
chunk-vendor.js --------- 各个组件公用的代码

我们主要关注app.js这个文件&#x