ExtractTextPlugin production configuration

[insin]

ExtractTextPlugin only extracts the entry chunk's CSS out into a CSS bundle by default.

If you have more than one bundle importing CSS, it also bundles up the not-insignificantly sized addStyles.js from style-loader and injects additional bundles' CSS on the fly.

If you use the allChunks: true option, it will extract CSS from all additional chunks into the CSS bundle and also skip bundling of addStyles.js.

Here are some numbers from cloning App.js/App.css as More.js/More.css and importing More.js. inside a require.ensure() to put it in a new chunk:

Current Config	With allChunks: true

New config in webpack.config.prod.js would be:

new ExtractTextPlugin('static/css/[name].[contenthash:8].css', {
  allChunks: true
})

Want a PR for this change? It seems like a sensible default way to handle production CSS.

[gaearon]

I'm not sure this is much better: doesn't this penalize the initial chunk?

I think it's important in code splitting that no matter what you do in async chunks, it won't affect the initial one. This lets people freely work on features without worrying they are making the ininitial load slow with deaths by a thousand cuts.

I think in this case having to ship the runtime is a sensible compromise.

[insin]

I think the question is what do you want the default behaviour/outcome for CSS imported in async chunks to be?

• With allChunks: false, main.js and every async .js chunk which imports CSS will be larger and async chunks will inject new styles on the fly when they load.
• With allChunks: true, main.js and every async .js chunk which imports CSS will be smaller and all imported CSS will be loaded up-front in main.css.

[gaearon]

I think it’s important that no changes to async bundle should increase the initial page load. From that logic, it’s better to bloat async bundles a little but feel safe that they never influence the initial main.css.