extract_css does't work well with chunking

[zioth]

If you use automatic late-loaded chunking (for example, through React's lazy() function), and turn on extract_css, you get one CSS file per chunk, which is probably not the desired behavior when there are many small chunks. I can fix it like this:

    environment.config.set('optimization.splitChunks.cacheGroups.styles', {
      name: 'styles',
      test: module => module.type === 'css/mini-extract'
    });

however, it creates styles.css, not application.css (or whatever matches my entrypoint). It would be useful to have an option to create one chunk per entrypoint, or just one big chunk which would be loaded as a side-effect of stylesheet_pack_tag.

Doing this also has a side-effect of creating styles.js, which, annoyingly, must be loaded, or no JS chunks will be evaluated. Related: webpack-contrib/mini-css-extract-plugin#147

[jakeNiemiec]

Looks like this will be fixed with Webpack@5.

[zioth]

The issue where you can't create application.css should be fixed in webpack 5, but the feature request still stands (making a webpacker.yml feature to combine all CSS chunks into one file).

Do you happen to know the release date for Webpack 5? I couldn't find it.

[jakeNiemiec]

Do you happen to know the release date for Webpack 5?

When these are done: https://github.com/webpack/webpack/projects/5

the feature request still stands (making a webpacker.yml feature to combine all CSS chunks into one file)

This is what lazy() is meant to do, if you import your styles in a pack file, you won't see this behavior. Perhaps I misunderstand your requirements?

[zioth]

Here's what I mean:

extract_css replaces style-loader with MiniCssExtractPlugin.loader. If you then request the application pack_tag, a whole bunch of little css files are loaded in the browser. This is because of Webpack and MiniCssExtractPlugin's default lazy/import behavior, which creates a css chunk for every css-importing js chunk.

It would be nice to have an additional configuration option, maybe combine_css, which adds the splitChunks configuration in my first post above to the webpack config. This would change the default behavior (one css chunk per js chunk) to my desired behavior (one css chunk, regardless of the number of js chunks).

Why do I think this additional feature is a good idea? Because the way rails-webpacker automatically generates webpack configuration means that webpacker.yml interacts in confusing ways with environment.js. Putting additional common use-cases in the yml would make it less difficult to figure out how to implement those cases. Alternatively, the yml could be made less restrictive, giving more control to the standard webpack config in environment.js. I'd actually prefer the later, but the former seems more in line with the way rails-webpacker has been developed.

[jakeNiemiec]

a whole bunch of little css files are loaded in the browser

This is the intended goal of splitChunks. Browsers can download lots of small files in parallel faster than one big file.

the way rails-webpacker automatically generates webpack configuration means that webpacker.yml interacts in confusing ways with environment.js

This is a good case in favor of an eject feature (eg #1916). Some people know what they are doing and don't need the webpacker.yml trying to pigeonhole their efforts.

[zioth]

a whole bunch of little css files are loaded in the browser
This is the intended goal of splitChunks. Browsers can download lots of small files in parallel faster than one big file.

I understand that. However, a common use case (and, I think, the primary use case for MiniCssExtractPlugin) is to have multiple JS chunks and one big CSS chunk. CSS is generally much smaller than JS, and compresses much better with gzip, so you usually get better performance from a single CSS and multiple JS files, than from downloading two files every time you want a chunked component. Additionally, late-loading CSS has implications for client-side performance.

Considering that this common use-case can be covered by two lines of webpack config, it would be nice to integrate the feature into rails-webpacker. It would also be nice to have one CSS chunk per entrypoint. This would provide a further optimization in the case where there are multiple entries, and only one is loaded on any given page (for example, in a project with two web apps which have some shared components).

[guillaumebriday]

Is this still an issue?

Feel free to reopen if needed