【Vue25】异步组件实现按需加载

打包出来的js有3个:

app.js     ---------   所有页面的业务逻辑
vendor.js   ---------   各个组件公用的代码
manifest.js   ---------   项目各个组件的业务逻辑

我们需要优化的是app.js，因为它放的是所有页面的业务逻辑，比如说当我们访问首页的时候，不要其他页面诸如列表页的业务逻辑，但是app.js却将所有的包裹进来了。
当项目越来越大的时候，app.js也越来越大，可能会上M，所以就需要我们用异步组件对其进行优化。

什么是异步组件？

当我们在开发环境运行的时候，没有其他的js，只加载了app.js

开发环境

所以一次性将所有的代码都加载好了，再去其他的页面，不会再发起别的js请求了。
而我们想要做的是，现在在首页，就只加载首页的业务逻辑
去列表再加载列表的代码，这就是异步加载，需要什么加载什么。
去router/index.js里修改

来修改这部分代码

之前的模式是直接将所有组件 import进来，然后配置路由，写上它们的组件名称。
现在修改成这样：

修改成这样

compontents直接修改成一个箭头函数引入组件的形式，最顶部的直接引入去掉了。

此时进来加载了两个js

修改完成重新进入，发现多了一个 2.js，此时 app.js里已经不包括所有的业务逻辑了，它现在只包含了 manifest和 vendor的内容，首页的业务逻辑存放在 2.js里，切换到别的页面。别的页面不会加载别的文件，只加载了当前页面的业务逻辑，名字叫做 4.js

只加载了4.js

优缺点

我们访问首页时，只需要加载首页对应的业务逻辑就行了，不会加载其他的业务逻辑。
但是当我们的app.js非常小的时候，不需要做这个拆分，虽然感觉这个页面加载的代码少了，但是访问下一个页面时，会额外发起一个http的请求，所以，当app.js很小的时候，，发起一个http请求的代价远比首页多加载一些js代码要来的高。

其他地方

不仅仅在路由中，只要是Vue之中的组件，都可以进行异步的加载。

在Home组件里修改header组件

我们运行的时候发现又多了一次请求。多了一个 2.js

又多了一次请求

【PS：文件不大的时候就不要拆分啦，不然会加重负担】