Mini-css-extract-plugin: Allow defining which chunks will be loaded dynamically

[bebraw]

It would be useful to have means to define which chunks are loaded dynamically and which are not. I did a small implementation that allows this:

...

module.exports = {
    plugins: [
        new CssExtractPlugin({
            loadAsync: chunk => chunk.modulesSize() >= 200000, // condition
            captureCss: CssExtractPlugin.writeManifest('css-extract.json') // action
        }),
    ]
};

I'm not sure of the naming but basically this does the trick for me. I write a manifest which I use later to inline the CSS but you could easily write a CSS file through webpack here as well. You can find my code here.

Let me know if you want a PR.

[garygreen]

All this chunking is getting so complicated. Could the new splitChunks option not unify all the chunking across the project, so you define a css group and use the minChunks option (in your example - loadAsync) in order to determine if it should be chunked? Seems there is so much duplicate of functionality across webpack which leads to unnecessarily complicated configurations

[bebraw]

@garygreen I think in the ideal case this plugin wouldn't be needed. I hope webpack 5 simplifies this. I had to implement the code above by necessity. 👍

[dtothefp]

@bebraw so were are already waiting for Webpack 5 to solve things that Webpack 4 didn't address 😜 . Thanks for the example, I've resorted to using react-loadable and inlining link tags for my page specific chunks. This results in double loading CSS though when the loaded async JS inserts the link tag for the async CSS. This wouldn't be a problem if I wasn't doing isomorphic rendering of JS but because I am the async loaded CSS causes an initial rendering of unstyled HTML for the page specific components.

[bebraw]

@dtothefp I have a SSR use case too. First I write a manifest through my extension and then use it to write critical CSS inline to initial HTML. This works well.

[dtothefp]

@bebraw that sounds cool and similar to what I’m doing. How do you prevent the request for the chunked CSS that you’ve already unlined? Your plugin looks cool but I was hoping to do this with he mini-css-extract-plugin as I thought it was going to be the maintained solution moving forward.

[KyleAMathews]

@dtothefp @sokra added this a day or two ago https://github.com/webpack-contrib/mini-css-extract-plugin#using-preloaded-or-inlined-css

[dtothefp]

@KyleAMathews thanks for the heads up on this....it works great. Only problem is to get it to work I need to compile the dist directory for the plugin. @sokra Wondering when we can expect a release?

[alexander-akait]

Today will be release, also with fix incremental problem.

[sokra]

Today will be release, also with fix incremental problem.

It's released, but the incremental problem is not fixed yet, as it required fixes to webpack too.

[sokra]

Regarding the original issue. This plugin just enables webpack to use CSS in chunks. You can use the usual webpack plugins/options to modify the chunk graph. i. e. splitChunks or AggressiveMergingPlugin.

[sokra]

Inlining could be a html-webpack-plugin -plugin. I guess there is already one.