[toc]
## 參考
>https://segmentfault.com/q/1010000015017897
>https://juejin.im/post/5af1677c6fb9a07ab508dabb
>https://www.jianshu.com/p/3066d96aec8b
>https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk
## 為什么要

## 異步代碼拆分
### import()進行代碼拆分



如果不給 **chunkName**
生成的是`1.chunk.js`,`2.chunk.js`這樣的

### 使用require.ensure進行代碼拆分


- 第一個參數 `[]` 里可以省略
#### require.include()
如果拆分出去的代碼有公共的代碼片段需要共享
可以在它們共同的父模塊處使用**require.include**這個公共的模塊,這樣拆分出去的模塊就不會各自都包含這個公共模塊(已經在父級里了)
## splitChunks
我們可以在 **splitChunks** 對象中進行全局拆分配置
,也可以在 **cacheGroups** 中進行訂制
**cacheGroups** 對象里的 **key** 就是拆分出去的代碼的文件名
`chunks:initial` 意思是首屏需要加載的
chunks支持的值有:"initial", "async"(默認) 或 "all"
- initial 入口chunk,對于異步導入的文件不處理
- async 異步chunk,只對異步導入的文件處理(個人理解)
- all 皆可



### 與production模式
production 中
會自動添加 splitchunks
1. 帶一個chunk是被共同依賴,或則是從node_modules中來的就會被切分
2. 某個chunk大于30kb就會被切分
3. 在按需加載的時候,最大的并行下載 chunk 數量應該要小于等于5
4. 在首屏加載的時候,最小的并行下載 chunk 的數量應該要小于等于3
### 其它注意事項
- cacheGroups 會繼承和覆蓋splitChunks的配置項,但是test、priorty和reuseExistingChunk只能用于配置緩存組。。
- cacheGroups 里的每一項最好都要加上chunks參數,不然可能打包不出來你想要的東西。
- minSize 默認是30KB(注意這個體積是壓縮之前的)在小于30kb的情況下一定要設置一個值,否則也可能打包不出來你想要的東西,而且這東西要加在cacheGroups里面。
- priority 在某些情況下,還是挺有用的,可以設置打包chunks的優先級。
## webpack 5

