理解webpack4.splitChunks之chunks

　　上回說到按照默認的splitChunks配置，入口里面的第三方依賴沒有打包出來，這個是因為chunks屬性的原因，下面我們就介紹chunks屬性的意義和用法。

chunks的含義是拆分模塊的范圍，它有三個值async、initial和all。

• async表示只從異步加載得模塊（動態加載import()）里面進行拆分
• initial表示只從入口模塊進行拆分
• all表示以上兩者都包括

我們回顧下上一篇文章里面我們說的webpack splitChunks默認配置：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

我們發現chunks的默認配置是async，也就是只從動態加載得模塊里面進行拆分，怪不得能夠把page1引入的第三方模塊拆分出來，但是因為entry1.js屬於入口chunk所以它引入的第三方庫react-dom就沒能拆分出來。

　　現在讓我們來將chunks設置為all看看能否修復這個問題，下圖就是chunks設置all拆分出來的代碼：

　　

這回我們發現入口模塊的第三方依賴已經被成功拆分出來了（第一個），接下來讓我來考考你，如果我將chunks設置為initial，打包的結果會是什么呢？

上面就是chunks設置為initial的結果，不知道你猜對了嗎，也就是將page1.js這個動態加載的模塊所引入的第三方模塊去掉了，沒有拆分出來，因為initial只會對入口模塊進行拆分。