Minifying CSS: explain why OptimizeCSSAssetsPlugin is better than css-loader

[sapegin]

Both are using cssnano, what’s the difference?

[bebraw]

Three things:

• Separation of concerns.
• The plugin based approach is more flexible (you can replace cssnano).
• The plugin gets applied to ExtractTextWebpackPlugin results. There's something about this point in their readme.

[sapegin]

As I understand it minifies the whole file instead of separate chunks which could be potentially faster and with a smaller result.

[bebraw]

Yeah, that's the key point.

[bebraw]

The problem is that I don't know when the CSS workflow is going to change. Maybe in a few months with webpack 4?

[sapegin]

Yeah, CSS in webpack is a big mess now ;-| Trying to make any sense of it again — couldn’t find any tutorial that would suggest using minimize=true for css-loader in production. They either do it unconditionally (not sure it’s a good idea) or still rely on LoaderOptionsPlugin.

[bebraw]

Can you check https://survivejs.com/webpack/optimizing/minifying/#minifying-css and let me know what you think? Is it clear enough?

[sapegin]

This sentence is very obscure:

Out of the available solutions, OptimizeCSSAssetsPlugin composes the best.

[bebraw]

Webpack dropped support for minification from css-loader so the approach that's covered seems like what remains. I rewrote the sentence to explain better.