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

Add output size check in CI #10090

Closed
wants to merge 7 commits into from
Closed

Add output size check in CI #10090

wants to merge 7 commits into from

Conversation

siddharthkp
Copy link

@siddharthkp siddharthkp commented Jul 1, 2017

What:

Basically this in the terminal and CI logs:

PASS  dist/react.min.js: 9.5kB < threshold 10kB gzip 

Why:

This will help in keeping the library tiny.

How:

  1. Added bundlesize as a dev dependency
  2. Added bundlesize in npm test

There is a tiny bit of configuration needed:

The config sits inside package.json, the threshold is set to 10kB right now.

Sadly,bundlesize does not build status for circleCI yet, I'll work on it and submit another PR which gives you this:

@facebook-github-bot
Copy link

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@siddharthkp siddharthkp changed the title Add bundlesize in test WIP: Add size check in CI Jul 1, 2017
@facebook-github-bot
Copy link

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

package.json Outdated
@@ -113,7 +114,7 @@
"linc": "git diff --name-only --diff-filter=ACMRTUB `git merge-base HEAD master` | grep '\\.js$' | xargs eslint --",
"lint": "node ./scripts/tasks/eslint.js",
"postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json",
"test": "jest",
"test": "jest && bundlesize",
Copy link
Collaborator

@gaearon gaearon Jul 1, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this will work. jest won't perform the build. We have a separate task that's used for CI.

Somewhere here is probably the right place for it.

package.json Outdated
},
"bundlesize": [
{
"path": "dist/react.min.js",
Copy link
Collaborator

@gaearon gaearon Jul 1, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you verify this? I don't think a file with this name gets generated on master.

You probably want to add build/dist/react.production.min.js and build/dist/react-dom.production.min.js here.

@siddharthkp
Copy link
Author

@gaearon Oh I was just trying out circleCI, I'm far from done here 😄

Tagged the PR with WIP

@siddharthkp
Copy link
Author

@gaearon It's done.

A circle CI integration with build status is coming soon too. I'll raise another PR then.

@siddharthkp siddharthkp changed the title WIP: Add size check in CI Add size check in CI Jul 1, 2017
@siddharthkp siddharthkp changed the title Add size check in CI Add output size check in CI Jul 1, 2017
@gaearon
Copy link
Collaborator

gaearon commented Jul 1, 2017

Can we roll everything into one PR instead of splitting?

@siddharthkp
Copy link
Author

Can we roll everything into one PR instead of splitting?

Sure, you'll have to wait for a few days though

@siddharthkp
Copy link
Author

@gaearon Thanks to @Furizaa, we already have this!

@ai
Copy link

ai commented Jul 2, 2017

What do you think about size-limit. It was created for same purpose. But it was created 2 day early :D.

Size Limit has 3 differences:

  1. It uses webpack/UglifyJS, so result it more accurate (shows process and other webpack polyfills).
  2. You have --why option to open Webpack Bundle Analyzer.
  3. Size Limit supports Node.js 4, has JS API and full test coverage.

@ai
Copy link

ai commented Jul 3, 2017

@gaearon I decided to merge with bundlesize and send all Size Limit benefits in PR siddharthkp/bundlesize#26

@siddharthkp
Copy link
Author

@gaearon hi 😄

@gaearon
Copy link
Collaborator

gaearon commented Jan 5, 2018

Sorry I forgot about this. I appreciate the effort but we'll probably go with #11865 instead. Since it lets us do other checks as well, and display more info.

@gaearon gaearon closed this Jan 5, 2018
@siddharthkp
Copy link
Author

No worries!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants