I'm using Webpack in combination with Babel to generate bundles compatible with older environments. For this I use babel-loader in Webpack 5. I'm using @babel/preset-env with the following config:
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3,
"targets": {
"browsers": [
"last 2 versions",
"not ie < 11",
"not ie_mob > 0"
]
},
}
This works fine, only the needed core-js imports are being added to the bundles I'm generating. What I did notice, is that a lot of the core-js imports are the same in the different bundles I'm generating. Since on some pages I have multiple bundles being loaded, I'd like to pull out the core-js imports into a separate bundle, and load that in my HTML.
I adapted my webpack config like this:
optimization: {
usedExports: true,
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](core-js)[\\/]/,
name: 'vendor',
chunks: 'all',
}
}
}
}
Now the result it that I'm getting a separate bundle containing the core-js imports from all my separate bundles, but there are a lot of duplicates in there (see 'web.url.js' for example).
How could I configure this so these core-js modules are not duplicated in the vendor bundle?