webpack code split

[佔坑，待填]

1. 分離業務代碼和第三方庫
2. 按需加載

分離業務與第三方

使用CommonsChunkPlugin，把nodemodule裏面的js都分離出來

按需加載

箭頭函數返回import（組件的地址），同時在webpack中配置chunk的名字 若是兩個按需加載的路由組件裏面都引用了相同的第三方庫，卻並不會分離出去，這種狀況使用CommonsChunckPlugin的async，將這個第三方庫單獨分離出來 若是兩個按需加載的路由組件都包含了公共組件，一樣也能夠用async，將公共組件單獨分離出來

分割代碼就是爲了充分利用的瀏覽器緩存

1. 利用CommonsChunkPlugin把webpack的runtime代碼提取出來，就是manifest js文件，避免好比在修改App。vue的時候也引發第三方庫vendor的chunk的更新，
2. 這時候，若是在APP。vue引入一個新的模塊，會發現全部chunk的哈希值都改變了，是由於webpack每一個模塊都有一個module id，根據模塊依賴自動按順序分配，引入模塊後致使其餘模塊的module id也發生變化。所以使用HashedModuleIdsPlugin，根據模塊所在路徑來計算哈希值

總結：

1. 生成穩定的哈希值
2. 提取webpack的runtime代碼
3. 代碼分割