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

Warn about large bundle sizes #2648

Merged
merged 1 commit into from Jun 27, 2017

Conversation

Projects
None yet
5 participants
@gaearon
Copy link
Member

commented Jun 27, 2017

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:
screen shot 2017-06-27 at 23 23 29

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.

@gaearon

This comment has been minimized.

Copy link
Member Author

commented Jun 27, 2017

@gaearon gaearon added this to the 1.0.8 milestone Jun 27, 2017

@gaearon gaearon merged commit 7cf4de7 into facebook:master Jun 27, 2017

0 of 2 checks passed

continuous-integration/appveyor/pr Waiting for AppVeyor build to complete
Details
continuous-integration/travis-ci/pr The Travis CI build is in progress
Details

kellyrmilligan added a commit to kellyrmilligan/create-react-app that referenced this pull request Jun 28, 2017

Merge branch 'master' into serve-app-under
* master: (59 commits)
  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)
  Ignore "Skipping static resource" message from SW precache (facebook#2645)
  Add React Styleguidist (facebook#2044)
  Update ISSUE_TEMPLATE.md (facebook#2643)
  Add Brackets to launchEditor.js (facebook#2637)
  Updated README (facebook#1931)
  Less passive-aggressive issue template
  Added instruction on how to install Prettier (facebook#2006)
  Fix CLI grammar (facebook#1945)
  Update README.md (facebook#1813)
  Add more info about OOM build failiure [docs] (facebook#2060)
  Update docs with WebSocket proxy information (facebook#2305)
  Add yarn example under "Installing a Dependency" (facebook#2362)
  ...

@gaearon gaearon referenced this pull request Jun 28, 2017

Merged

Changelog for 1.0.8 #2664

@addyosmani

This comment has been minimized.

Copy link

commented Jun 29, 2017

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!

@Timer

This comment has been minimized.

Copy link
Collaborator

commented Jun 29, 2017

@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.

@gaearon gaearon deleted the gaearon:bundle-size branch Jun 29, 2017

zangrafx added a commit to absolvent/create-react-app that referenced this pull request Jun 29, 2017

Merge remote-tracking branch 'upstream/master'
* 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

romaindso added a commit to romaindso/create-react-app that referenced this pull request Jul 10, 2017

wmonk referenced this pull request in wmonk/create-react-app-typescript Aug 7, 2017

@aCandidMind

This comment has been minimized.

Copy link

commented Aug 31, 2017

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.

@gaearon

This comment has been minimized.

Copy link
Member Author

commented Aug 31, 2017

Webpack 2 has something similar with performance hints but we found it easier to build our own since we control the output.

morgs32 added a commit to BrickworkSoftware/create-react-app that referenced this pull request Sep 1, 2017

@lock lock bot locked and limited conversation to collaborators Jan 20, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.