Warn about large bundle sizes #2648
Conversation
|
cc @addyosmani |
|
This is a great first step. The average JS bundle size folks are shipping on mobile is ~420KB. If we can iterate on the 500KB budget over time to get it even smaller that would be amazing. Thanks for shipping support for perf budgets! |
|
@addyosmani what is the target main bundle & chunk sizes we'd like to iterate towards (gzipped)? I figure the smaller the better, but we shouldn't push users too far if it's a reasonable time to interactive. |
* upstream/master: (55 commits) Fix minor typo (facebook#2679) Bootstrap with Yarn when available (facebook#2673) Add more info about apache client side routing (facebook#2666) Test Node 8 on Travis (facebook#2659) Add json and css to lint-staged in template README (facebook#2671) Add a note about fixed vulnerability in 1.0.8 Publish Changelog for 1.0.8 (facebook#2664) Reformat source code with Prettier 1.5.2 Update Prettier to v1 (facebook#2465) Update ISSUE_TEMPLATE.md Local testing docker links (facebook#2662) Better React Native Web support (facebook#2511) Bump dependencies (facebook#2658) Minor code style edits to user guide (facebook#2660) Don't ask to install webpack for using Styleguidist (facebook#2656) Put react-scripts in dependencies, not devDependencies (facebook#2657) Razzle added to the alternatives (facebook#2517) Warn about large bundle sizes (facebook#2648) Add instructions to use source-map-explorer (facebook#1641) ... # Conflicts: # packages/react-dev-utils/package.json # packages/react-scripts/config/webpack.config.dev.js # packages/react-scripts/config/webpack.config.prod.js # packages/react-scripts/package.json
|
Sorry for my ignorance just came here from twitter, can't this be added in webpack itself? Would come to benefit more people. Or is it even there already somehow? I'm on old webpack versions in all of my projects currently. |
|
Webpack 2 has something similar with |
We now have docs both about code splitting and about analyzing bundles so seems like a good time.
The limits are very liberal IMO. For the vast majority of apps it's possible to fit the main bundle into 512k gzipped, and 1M gzipped for individual chunks. If that doesn't fit you, you might as well need to eject for other reasons (e.g. too slow builds that need fine tuning with HappyPack or similar).
The warning looks like this:
In the screenshot I hardcoded it to show the message (to test it), but in practice it will only appear for main bundles > 512k gzipped, and for chunks > 1m gzipped.
This partially alleviates the problem #2645 is hiding. Perf sensitive users will probably notice this. We still don't address the issue in #2612 specifically but there's no way for us to know if the person has opted out of using service workers, so I don't think we can be more detailed there.