打包出来的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：文件不大的时候就不要拆分啦，不然会加重负担】
