Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ExtractTextPlugin production configuration #408

Closed
insin opened this issue Aug 9, 2016 · 3 comments
Closed

ExtractTextPlugin production configuration #408

insin opened this issue Aug 9, 2016 · 3 comments

Comments

@insin
Copy link
Contributor

insin commented Aug 9, 2016

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
mintty_2016-08-09_17-39-06 mintty_2016-08-09_17-39-21

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
Copy link
Contributor

gaearon commented Aug 9, 2016

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
Copy link
Contributor Author

insin commented Aug 10, 2016

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
Copy link
Contributor

gaearon commented Aug 10, 2016

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.

@gaearon gaearon closed this as completed Sep 3, 2016
@andriijas andriijas mentioned this issue Feb 26, 2018
23 tasks
andriijas added a commit to andriijas/create-react-app that referenced this issue Mar 6, 2018
- [x] Use new webpack 4 development and production modes
- [x] Upgrade webpack dev server
- [x] webpack 4 compatible release of thread-loader
- [x] Upgrade to webpack 4 compatible release of HtmlWebpackPlugin
- [x] Beta release of ExtractTextPlugin compatible plugin
- [x] Pre-release of SwPrecacheWebpackPlugin compatible plugin
- [x] Pre-release of WebpackManifestPLugin compatible plugin
- [x] allChunks on ExtractTextPlugin
fixes facebook#3086 facebook#2415

prior discussion facebook#408

more details of this behavior webpack/webpack#673
- [x] Update README
- [x] Update WebpackDevServerUtils
- [x] Update InterpolateHtmlPlugin
- [x] Update ModuleScopePlugin
- [x] Update WatchMissingNodeModulesPlugin
- [x] Move UglifyJS options to webpack 4 optimize
- [x] vendor splitting via splitChunks.splitChunks (https://twitter.com/wSokra/status/969633336732905474)
- [x] long term caching via splitChunks.runtimeChunk (https://twitter.com/wSokra/status/969679223278505985)
- [x] Make sure process.env.NODE_ENV is proxied correctly to `react-error-overlay`
@lock lock bot locked and limited conversation to collaborators Jan 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants