webpack如何Code Splitting拆分代碼splitChunks

webpack中的三個概念module、chunk和bundle

研究splitChunks之前，我們必須先弄明白這三個名詞是什麼意思，主要是chunk的含義，要不然你就不知道splitChunks是在什麼的基礎上進行拆分。《what are module,chunk and bundle in webpack》

• module：就是js的模塊化webpack支持commonJS、ES6等模塊化規範，簡單來說就是你通過import語句引入的代碼。

• chunk: chunk是webpack根據功能拆分出來的，包含三種情況：

  1. 你的項目入口（entry）
  2. 通過import()動態引入的代碼
  3. 通過splitChunks拆分出來的代碼

  chunk包含著module，可能是一對多，也可能是一對一。

• bundle：bundle是webpack打包之後的各個文件，一般就是和chunk是一對一的關係，bundle就是對chunk進行編譯壓縮打包等處理之後的產出。

Code Splitting

總體來說，webpack提供了三種方法來實現代碼拆分：

入口配置：多個entry入口起點。

抽取公有代碼：使用SplitChunks 抽取公有代碼。

動態加載：動態加載一些代碼。

抽取公有代碼是難點，也是平時項目中經常會用到的，在這裡只討論使用SplitChunks抽取公有代碼。

SplitChunks

SplitChunks是由webpack 4內置的SplitChunksPlugin插件提供的能力，可直接在optimization選項中配置。

SplitChunks抽取公有代碼，默認情況下，SplitChunks只影響按需加載的代碼塊(chunk)，為什麼這樣呢，因為代碼拆分會影響頁面