打包出來的js有3個:
app.js --------- 所有頁面的業(yè)務(wù)邏輯
vendor.js --------- 各個組件公用的代碼
manifest.js --------- 項目各個組件的業(yè)務(wù)邏輯
我們需要優(yōu)化的是app.js，因為它放的是所有頁面的業(yè)務(wù)邏輯，比如說當我們訪問首頁的時候，不要其他頁面諸如列表頁的業(yè)務(wù)邏輯，但是app.js卻將所有的包裹進來了。
當項目越來越大的時候，app.js也越來越大，可能會上M，所以就需要我們用異步組件對其進行優(yōu)化。
什么是異步組件？
當我們在開發(fā)環(huán)境運行的時候，沒有其他的js，只加載了app.js
開發(fā)環(huán)境
所以一次性將所有的代碼都加載好了，再去其他的頁面，不會再發(fā)起別的js請求了。
而我們想要做的是，現(xiàn)在在首頁，就只加載首頁的業(yè)務(wù)邏輯
去列表再加載列表的代碼，這就是異步加載，需要什么加載什么。
去router/index.js里修改
來修改這部分代碼
之前的模式是直接將所有組件
import進來，然后配置路由，寫上它們的組件名稱。現(xiàn)在修改成這樣：
修改成這樣
compontents直接修改成一個箭頭函數(shù)引入組件的形式，最頂部的直接引入去掉了。
此時進來加載了兩個js
修改完成重新進入，發(fā)現(xiàn)多了一個
2.js，此時app.js里已經(jīng)不包括所有的業(yè)務(wù)邏輯了，它現(xiàn)在只包含了manifest和vendor的內(nèi)容，首頁的業(yè)務(wù)邏輯存放在2.js里，切換到別的頁面。別的頁面不會加載別的文件，只加載了當前頁面的業(yè)務(wù)邏輯，名字叫做4.js
只加載了4.js
優(yōu)缺點
我們訪問首頁時，只需要加載首頁對應(yīng)的業(yè)務(wù)邏輯就行了，不會加載其他的業(yè)務(wù)邏輯。
但是當我們的app.js非常小的時候，不需要做這個拆分，雖然感覺這個頁面加載的代碼少了，但是訪問下一個頁面時，會額外發(fā)起一個http的請求，所以，當app.js很小的時候，，發(fā)起一個http請求的代價遠比首頁多加載一些js代碼要來的高。
其他地方
不僅僅在路由中，只要是Vue之中的組件，都可以進行異步的加載。
在Home組件里修改header組件
我們運行的時候發(fā)現(xiàn)又多了一次請求。多了一個
2.js
又多了一次請求
【PS：文件不大的時候就不要拆分啦，不然會加重負擔】
