SplitChunks快速使用手冊

splitChunks: {
      // chunks能夠爲三種值：async,initial,all；決定代碼知足條件後是否進行拆分。
      // initial表示只考慮非import()異步導入代碼進行拆分，async表示只拆分異步代碼塊，而all表示同異步都加入拆分範疇。
      chunks: 'async',
      
      // 知足尺寸才發生拆分
      // 例如導入10kb的依賴包小於30kb便不會拆分代碼塊
      minSize: 30000,
      
      // 當bundle達到maxSize，必須進行拆分
      // 例如jquery與lodash合併成了140kb，maxSize定位80kb，便會拆分兩個依賴
      maxSize: 0,
      
      // 最少被引用的chunk個數
      // 例如一個入口塊和一個異步塊都引用了lodash，minChunks大於2時就不會添加新chunk來裝lodash
      minChunks: 1,
      
      // 異步代碼塊最多可拆分次數
      // 假設某個import()模塊有2MB，maxSize設定爲500kb，若是此屬性爲1，模塊最多就只能拆分一個bundle出去。
      maxAsyncRequests: 5,
      
      // 這屬性和maxAsyncRequests道理一致，不過是做用與initial模塊的
      maxInitialRequests: 3,
      
      // bundle自動命名使用的鏈接字符
      automaticNameDelimiter: '~',
      
      // bundle自動命名時名稱長度限制
      automaticNameMaxLength: 30,
      
      // 可爲bool、string類型，true是會使用默認命名，不然使用序號命名；string指定文件名稱
      name: true,
      
      // 自定義拆分組
      cacheGroups: {
      
        // 每一個屬性就是一個分組
        vendors: {
        
          // 導入路徑的正則匹配，這爲全部node_modules引用的模塊代碼
          test: /[\\/]node_modules[\\/]/,
          
          // 優先級默認爲0，若是兩個組引用了同一個模塊，優先級高的組能夠得到此模塊
          priority: -10
          
        },
        default: {
          minChunks: 2,
          priority: -20,
          
          // 是否複用其餘chunk內已擁有的模塊
          // 默認爲false，關閉表示拆分出複用部分的模塊，給雙方引用
          reuseExistingChunk: true
        }
      }
    }
複製代碼

一些提示

• 默認配置在大多數場景下都有不錯的表現
• webpack的externals更適合把第三方庫移到CDN上
• test匹配規則也能夠是一個方法，分組更靈活

更多相關的資料

• webpack 4: 代碼拆分、代碼塊關係圖及優化插件splitChunks
• 爲 splitChunks 添加 maxSize 選擇
• 不清楚 splitChunks.maxAsyncRequest 有什麼用
• reuseExistingChunk 的使用例子