runtimeChunk

在webpack編譯中可以設定,會將import的代碼抽離做chunk,避免重複使用,若沒有使用runtimeChunk則有可能導致相同導案被重複產程兩個相同js擋

optimization: {
	runtimeChunk: {
    name: (entrypoint) => `runtimechunk~${entrypoint.name}`,
  },
}

splitChunks

負責處理編譯後的三方庫減少重複引入

optimization: {
    splitChunks: {
      cacheGroups: {
				react: {
					// 匹配路徑
          test: /[\\\\/]node_modules[\\\\/](react|react-dom)[\\\\/]/,
					// 編譯後名稱
          name: 'r16',
					// async => 只拆分透過import引入的模塊
					// initial => 指拆分初始加載模塊
					// all => 以上兩者都加載
          chunks: 'all',
					// 指定拆分的優先級,最大10
          priority: 1,
					// 是否重復使用匹配到的chunk
          reuseExistingChunk: true,
        },
			}
		}
}