module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',
      // 生成的 chunk 的最小體積，單位為字節(jié)（bytes）。內(nèi)容超過(guò)了minSize的值，才會(huì)進(jìn)行打包
      minSize: 20000,
      minRemainingSize: 0,
      // 在拆分之前，必須共享的模塊的最小 chunk 數(shù)。
      minChunks: 1,
      // 在按需加載時(shí)，允許的最大并行請(qǐng)求數(shù)。
      maxAsyncRequests: 30,
      // 入口點(diǎn)允許的最大并行請(qǐng)求數(shù)。
      maxInitialRequests: 30,
      // 超過(guò)這個(gè)值就會(huì)進(jìn)行強(qiáng)制分包處理，無(wú)視minRemainingSize,maxAsyncRequests，maxInitialRequests
      enforceSizeThreshold: 50000,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          // 如果當(dāng)前 chunk 包含已從主 bundle 中拆分出的模塊，則它將被重用，而不是生成新的模塊
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

splitChunks: {
          // chunks、minSize、minChunks 將對(duì)所有緩存組生效
          chunks: 'all', // 對(duì)所有的chunk進(jìn)行拆分 
          minSize: 20000, // 拆分 chunk 的最小體積 20000 bytes
          minChunks: 2, // 需在兩個(gè)模塊中共享才進(jìn)行拆分
          cacheGroups: {
            vendor: {
              name: 'vendor', // chunk 的名稱(chēng) vendor
              test: /[\\/]node_modules[\\/]/i,    // 匹配node_modules下所有的chunk
              priority: 10,    // 優(yōu)先級(jí)10 優(yōu)先將node_modules下的chunk拆分到vendor組
              reuseExistingChunk: true, // 重用模塊，而不是重新生成
              enforce: true, // 強(qiáng)制拆分
            },
            default: {    // 默認(rèn)組 非node_modules下的文件塊 將執(zhí)行default緩存組規(guī)則
              reuseExistingChunk: true,
              priority: -10, // 優(yōu)先級(jí) -10 
              enforce: true, // 強(qiáng)制拆分
            },
            react: { // react組
              name: 'react',
              test: /[\\/]node_modules[\\/]react[\\/]/,    // 匹配node_modules下的react庫(kù)
              priority: 20,    // 優(yōu)先級(jí)20 優(yōu)先將node_modules下的react拆分出去
              minChunks: 2,
              reuseExistingChunk: true,
            },
            antd: {    // antd組
              name: 'antd',
              test: /[\\/]node_modules[\\/]antd[\\/]/,    // 匹配node_modules下的antd庫(kù)
              priority: 20,    // 優(yōu)先級(jí)20 優(yōu)先將node_modules下的antd拆分出去
              minChunks: 2,
              reuseExistingChunk: true, // 重用模塊，而不是重新生成
            },
          }
        }

splitChunks: {
          chunks: 'all',
          enforceSizeThreshold: 50000,
          cacheGroups: {
            vendors: {
              priority: -10,
              test: /[\\/]node_modules[\\/]/,
              name(module2) {
                return module2.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)?.[1];
              },
            },
          },
          minSize: 0,
          maxInitialRequests: Infinity,
        },

vendor: {
              name: 'vendor', // chunk 的名稱(chēng) vendor
              test: /[\\/]node_modules[\\/]/i,    // 匹配node_modules下所有的chunk
              priority: 10,    // 優(yōu)先級(jí)10 優(yōu)先將node_modules下的chunk拆分到vendor組
              reuseExistingChunk: true, // 重用模塊，而不是重新生成
              enforce: true, // 強(qiáng)制拆分
    },

splitChunks: {
      chunks: 'all',
      minSize: 20000, // 20 KB
      maxSize: 50000, // 50 KB
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },