Can I disable style chunking while using dynamic import with webpack4 in Vue project?

Question

I am using dynamic import and webpackChunkName in the router of my Vue project. The imported modules use some Vuetify components. Once I build the project I see some chunked CSS files which include duplicated content from the vendor CSS file. How can I prevent this duplication?

Answer 1

I could have finally found out the solution myself. I have changed chunks from async to all which enables sharing the chunks over all sync and async chunks. This way no new chunks are created with the content from vendor CSS files. Check here for more details.

Here's my WebPack configuration from my vue.config.js.

configureWebpack: {
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    chunks: 'all',
                },
            }
        }
    },
}