I'm on Webpack 5, compiling mostly Vue sfc sass styles, and currently I achieved to extract all the css styles to a single css bundle using mini-css-extract-plugin.
Obviously this bundle has grown in size and consequently the download stars taking s bit too much time, so I'm trying to split it in smaller chunks to parallelize the download.
Found this SO question, but the user managed to solve the problem using multiple entry points (which I want to avoid since the project is a spa (am I wrong?)) and this answer which suggest to configure mini-css-extract-plugin filename property to use a function instead of a string, but it seems not working since every chunk passed to the function seems having the same name/id, maybe due starting from a single entry point?
new MiniCssExtractPlugin({
// example
filename: (x) => {
console.log(x.chunk.name);
console.log("=====");
return "css/main.[contenthash].css";
}
}),
> webpack-demo@1.0.0 build
> webpack
main
=====
main
=====
main
=====
main
=====
...
How can I split the outputted css bundle to multiple files?
