在webpack編譯中可以設定,會將import的代碼抽離做chunk,避免重複使用,若沒有使用runtimeChunk則有可能導致相同導案被重複產程兩個相同js擋
optimization: {
runtimeChunk: {
name: (entrypoint) => `runtimechunk~${entrypoint.name}`,
},
}
負責處理編譯後的三方庫減少重複引入
optimization: {
splitChunks: {
cacheGroups: {
react: {
// 匹配路徑
test: /[\\\\/]node_modules[\\\\/](react|react-dom)[\\\\/]/,
// 編譯後名稱
name: 'r16',
// async => 只拆分透過import引入的模塊
// initial => 指拆分初始加載模塊
// all => 以上兩者都加載
chunks: 'all',
// 指定拆分的優先級,最大10
priority: 1,
// 是否重復使用匹配到的chunk
reuseExistingChunk: true,
},
}
}
}