Skip to content

Conversation

@youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Feb 18, 2020

Adds a Github action to compare the bundle size of the different packages between the PR branch and master.

Seems to work pretty well (see the comment here)

@github-actions
Copy link

Size Change: 0 B

Total Size: 734 kB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.01 kB 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 kB 0 B
build/block-editor/index.js 104 kB 0 B
build/block-library/index.js 112 kB 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.6 kB 0 B
build/components/index.js 190 kB 0 B
build/compose/index.js 5.76 kB 0 B
build/core-data/index.js 10.5 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/data/index.js 8.23 kB 0 B
build/date/index.js 5.36 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-post/index.js 90.5 kB 0 B
build/edit-site/index.js 2.71 kB 0 B
build/edit-widgets/index.js 4.36 kB 0 B
build/editor/index.js 45.1 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.6 kB 0 B
build/hooks/index.js 1.92 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.45 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.68 kB 0 B
build/list-reusable-blocks/index.js 2.99 kB 0 B
build/media-utils/index.js 4.84 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.02 kB 0 B
build/plugins/index.js 2.24 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/priority-queue/index.js 878 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.3 kB 0 B
build/server-side-render/index.js 2.54 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

@youknowriad youknowriad self-assigned this Feb 18, 2020
@youknowriad youknowriad added the [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. label Feb 18, 2020
@gziolo
Copy link
Member

gziolo commented Feb 19, 2020

Love it 😍

@ntwb
Copy link
Member

ntwb commented Feb 19, 2020

Neat, but it might get a bit "noisy" if this is adding comments to every PR?

@youknowriad
Copy link
Contributor Author

Noise is a valid concern but I think it's worth it. We can try and see.

@simison
Copy link
Member

simison commented Feb 19, 2020

Cc @jsnajdr with his experience in Calypso repo for similar tool.

@simison simison requested a review from jsnajdr February 19, 2020 08:41
@youknowriad youknowriad merged commit 6942c1d into master Feb 19, 2020
@youknowriad youknowriad deleted the add/bundle-size branch February 19, 2020 09:42
@github-actions github-actions bot added this to the Gutenberg 7.6 milestone Feb 19, 2020
@jsnajdr
Copy link
Member

jsnajdr commented Feb 19, 2020

Calypso has been using a similar tool for almost a year now. If the message is collapsed by default (doesn't post a wall of text that one needs to scroll over), and provides useful and actionable information, then it's not perceived as noise.

The Calypso bot posts messages that are customized for Calypso and its architecture: grouping stats by entrypoints, async loaded sections (triggered by route navigation) and async loaded React components (triggered by a lazy React render).

For Gutenberg, it could be useful to provide information about which packages got smaller, which ones got bigger, and also how the overall Gutenberg app was affected. I.e., how much has the size of JS and CSS that the user's browser needs to download before showing the block editor?

@youknowriad
Copy link
Contributor Author

Thanks for the insights @jsnajdr

For Gutenberg, it could be useful to provide information about which packages got smaller, which ones got bigger

That's exactly what the action is doing here

how the overall Gutenberg app was affected. I.e., how much has the size of JS and CSS that the user's browser needs to download before showing the block editor?

For this to be accurate, we're missing two things:

  • The externals (React, moment, ...) (there's a static list in the webpack dependencies package)
  • The stylesheets.

I wonder if the Github action I've used work for stylesheets too and I could just adapt the "pattern" to take these into consideration.

@aduth
Copy link
Member

aduth commented Feb 26, 2020

Noting that I had a very similar task idea in the Project Management Automation project board:

When a pull request includes a change that would affect bundle sizes, post the difference. One simple approach may be to consider new dependencies added in common UI packages (components, editor) and use a resource such as https://bundlephobia.com/ to retrieve their added size.

"This pull request is adding the dependency css-mediaquery. According to BundlePhobia, this may add upwards of 1.8kb to the bundle size, and increase load times for emerging 3G devices by 17ms."

Goal: Keep bundle sizes in check, be respectful of slower network connections and real-world impact of our choices to add dependencies.

I marked it as "Done" and linked it to this pull request as reference.

@ellatrix
Copy link
Member

I don't want to be annoying, bit I find this indeed a bit "noisy". I've not found myself looking at this at all (generally I can kind of guess how much code I'm adding or removing). This comment is especially annoying in email notifications, where it's a huge email (not collapsed) and I cannot unsubscribe from this kind of comments. It's often also tricked me into thinking someone replied to me PR, only to realise it was a bot! 🤖

Maybe there's a way to keep the information, but not as "proper" comment. Not sure if there can be something like pseudo comments, or appending the info to the PR description?

@youknowriad
Copy link
Contributor Author

It is indeed a bit noisy and not useful in all PRs, I do check it though for PRs that add npm packages, icons... I think appending to the description could work.

@simison
Copy link
Member

simison commented Mar 18, 2020

@youknowriad also posting the comment only when there's a significant change to either direction could work.

@ntwb
Copy link
Member

ntwb commented Mar 18, 2020

Wondering if this bot could be changed so that it reports as part of the checks process:

image

Possibly with a warning status if there is a "significant change" as @simison suggests?

@aduth
Copy link
Member

aduth commented Mar 18, 2020

For what it's worth, I opened a pull request on the upstream action at preactjs/compressed-size-action#16 , including a bit of my own thoughts and a proposal for limiting its messaging.

@developit
Copy link

Hi all - good points about the comment being a little noisy. I've never come across anyone who has emails turned on for GitHub PR comments and totally didn't consider that when building the output.

Regarding the use of checks - I'd actually attempted this previously but didn't pursue it. I just opened a draft PR with the changes, if anyone wants to give it a look:
preactjs/compressed-size-action#18

I'd be happy to merge this into compressed-size-action behind a use-check flag in order to trial it here.

@ellatrix
Copy link
Member

ellatrix commented Apr 9, 2020

Ah, I think Github action notifications can be turned off. https://github.com/settings/notifications

@youknowriad
Copy link
Contributor Author

Hey @developit Thanks for reaching out here and sorry for the delay to respond. @aduth do you have thoughts on the "checks" here?

If I understand properly, checks will need a threshold to fail or succeed, for me, I'd prefer the bundle change to be more an "information" than a "status". The reasons being:

  • Small PRs shouldn't have an impact on bundle size even if it's a moderate impact
  • Bigger PRs are allowed to have a reasonable impact there.

I don't think a threshold is something that can be unique across PRs.

@aduth
Copy link
Member

aduth commented Apr 9, 2020

I'd tend to agree with you @youknowriad . I don't know that it's something we'd want to be a blocker for a pull request, even if it were possible to come to some reasonable determination of a threshold. It might be nice if checks supported some way to signal informational or advisory messaging.

Via https://developer.github.com/v3/checks/runs/#update-a-check-run, here are the full set of "conclusion" options:

success, failure, neutral, cancelled, timed_out, or action_required

Neutral is probably the closest to something informational. But given the current UX, I'd still worry it would too easily be misinterpreted as a "problem" (i.e. problem = a lack of "all green").

Via https://developer.github.com/changes/2018-05-07-new-checks-api-public-beta/ :

checks

@youknowriad
Copy link
Contributor Author

@aduth Interesting, I actually didn't know about "Neutral" checks. I'd be fine exploring it tbh if that option was available.

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

Labels

[Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

9 participants