webpack中的三個概念module、chunk和bundle
研究splitChunks之前，我們必須先弄明白這三個名詞是什麼意思，主要是chunk的含義，要不然你就不知道splitChunks是在什麼的基礎上進行拆分。《what are module,chunk and bundle in webpack》
- module：就是js的模塊化webpack支持commonJS、ES6等模塊化規範，簡單來說就是你通過import語句引入的代碼。
chunk: chunk是webpack根據功能拆分出來的，包含三種情況：
- 你的項目入口（entry）
- 通過import()動態引入的代碼
- 通過splitChunks拆分出來的代碼
chunk包含著module，可能是一對多，也可能是一對一。
- bundle：bundle是webpack打包之後的各個文件，一般就是和chunk是一對一的關係，bundle就是對chunk進行編譯壓縮打包等處理之後的產出。
Code Splitting
總體來說，webpack提供了三種方法來實現代碼拆分：
入口配置：多個entry入口起點。
抽取公有代碼：使用SplitChunks 抽取公有代碼。
動態加載：動態加載一些代碼。
抽取公有代碼是難點，也是平時項目中經常會用到的，在這裡只討論使用SplitChunks抽取公有代碼。
SplitChunks
SplitChunks是由webpack 4內置的SplitChunksPlugin插件提供的能力，可直接在optimization選項中配置。
SplitChunks抽取公有代碼，默認情況下，SplitChunks只影響按需加載的代碼塊(chunk)，為什麼這樣呢，因為代碼拆分會影響頁面