Vue使用日记（23）：vue-router详解（4）——路由懒加载

路由懒加载

首先，我们知道路由中通常会定义很多不同的页面；

这些页面最后被打包在哪里呢? 一般情况下，是放在一个js文件（指app.3252jshdfsdjfskdf……js，下面会说）中；

但是，页面这么多放在一个js文件中，必然会造成这个页面非常的大；

如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白的情况。

为了避免这种情况，就可以使用路由懒加载。

路由懒加载做了什么?

路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块；

只有在这个路由被访问到的时候，才加载对应的组件。

说明：通常vue的页面在运行后进入都会有一个默认的页面，而其他页面只有在点击后才需要加载出来。 

其实使用Vue脚手架进行项目创建，项目打包时会发现js被分成了3个。

这三个js文件分别指的是：

app开头的文件指当前项目的所有业务逻辑代码；

manifest开头的文件指项目打包时的底层支撑代码，比如使各个规范（ES6、CommonJS、AMD、CMD等）的导入和导出能被浏览器识别的底层支撑等等；

vendor开头的文件指第三方框架（比如Vue、vue-router和axios等等）、插件代码。

另外，上面被打包的js、css或index.html一般都被丑化压缩过，如果想阅读被打包后的js代码，可以找到webpack的配置文件里的丑化插件给注释掉，再重新打包即可。 

但是app开头的js文件明显在项目开发后期体积会变大，项目加载时就会出现上面说的请求时间过长、出现空白等情况。所以需要配置路由懒加载。

 

配置路由懒加载

方式一

配置，这里使用ES6的import方式：

使用：

方式二

推荐使用方式一，因为便于管理。

另外，说一下AMD的配置方式：