Webpack 5 splitChunks maxSize not working - vue.js

Question

I am maintaining a VueJS project with Webpack 5. The built files are too large, especially those vendor files so I decided to use splitChunks to split large files into smaller files. My condition to split a file is if the file is bigger than 200kb, it will be split. However, my vendor file still remains nearly 2 Mb. This is my webpack configuration:
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: (config) => ({
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
minify: TerserPlugin.swcMinify,
parallel: true,
terserOptions: {
compress: true,
},
}),
],
splitChunks: {
enforceSizeThreshold: 500000,
cacheGroups: {
vendor: {
name: 'vendors',
test: /[\\/]node_modules[\\/]/,
chunks: 'all',
minSize: 0,
maxSize: 500000,
},
},
},
},
plugins: [
new ModuleFederationPlugin({
name: 'Test Module',
filename: 'testEntry.js',
exposes: {
'./Main': './src/bootstrap',
},
}),
new webpack.DefinePlugin(clientEnv),
],
}),
publicPath: 'auto',
devServer: {
port: process.env.APP_DEV_PORT,
historyApiFallback: true,
},
});
Before using splitChunks, my largest vendor file is 2.2 Mb. After using splitChunks, it's 2.0 Mb, still far bigger than the maxSize