Add module size analysis #155

camchenry · 2022-07-29T14:57:59Z

This PR adds a more detailed bundle size analysis than just the aggregate asset size, which includes only files that were changed (i.e., added, removed, made larger, or made smaller).

The changeset table is sorted from largest diff percentage to smallest diff percentage, so that large bundle size increases (in relative terms) are highlighted first. The newly added stats files were derived from a much larger stats.json file which reflects real-world usage. The new changeset table will only be generated if chunks information is available. Otherwise, it will not be shown.

The following is an example of what the Bundle Stats comment looks like now:

Bundle Stats

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Type	Total bundle size	% Changed
2	bundled	1.98 MB	0%

Changeset

File	Size	% Changed
./src/client/this-file-was-added.ts	0 Bytes -> 1.46 KB (+1.46 KB)	-
./src/client/this-file-grew-larger.tsx	562 Bytes -> 762 Bytes (+200 Bytes)	+35.59%
./src/client/helpers/this-file-grew-smaller.ts	2.46 KB -> 2.26 KB (-200 Bytes)	-7.94%
./src/client/this-file-will-be-deleted.ts	1.46 KB -> 0 Bytes (-1.46 KB)	-100%

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	Type	File Size	% Changed
app.bundle.js	bundled	1.98 MB	0%
manifest.json	bundled	91 Bytes	0%

github-actions · 2022-07-29T14:58:47Z

Bundle Stats

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Type	Total bundle size	% Changed
7 -> 2	bundled gzip	1.34 MB -> 1.29 MB (-53.65 KB) 386.44 KB -> N/A	-3.91%

View detailed bundle breakdown

Added

No assets were added

Removed

Asset	Type	File Size	% Changed
296.chunk.js	bundled gzip	124.57 KB -> 0 Bytes (-124.57 KB) 35.05 KB -> 0 Bytes	-100%
288.chunk.js	bundled gzip	57.24 KB -> 0 Bytes (-57.24 KB) 16.33 KB -> 0 Bytes	-100%
920.chunk.js	bundled gzip	54.98 KB -> 0 Bytes (-54.98 KB) 17.08 KB -> 0 Bytes	-100%
912.chunk.js	bundled gzip	44.37 KB -> 0 Bytes (-44.37 KB) 14.31 KB -> 0 Bytes	-100%
699.chunk.js	bundled gzip	26.39 KB -> 0 Bytes (-26.39 KB) 6.14 KB -> 0 Bytes	-100%

Bigger

Asset	Type	File Size	% Changed
app.bundle.js	bundled gzip	1.04 MB -> 1.29 MB (+254.35 KB) 297.38 KB -> N/A	+23.91%

Smaller

Asset	Type	File Size	% Changed
manifest.json	bundled gzip	551 Bytes -> 91 Bytes (-460 Bytes) 151 Bytes -> N/A	-83.48%

Unchanged

No assets were unchanged

github-actions · 2022-07-29T14:58:48Z

Bundle Stats-Flipped around

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Type	Total bundle size	% Changed
2 -> 7	bundled gzip	1.29 MB -> 1.34 MB (+53.65 KB) N/A -> 386.44 KB	+4.07%

View detailed bundle breakdown

Added

Asset	Type	File Size	% Changed
296.chunk.js	bundled gzip	0 Bytes -> 124.57 KB (+124.57 KB) 0 Bytes -> 35.05 KB	-
288.chunk.js	bundled gzip	0 Bytes -> 57.24 KB (+57.24 KB) 0 Bytes -> 16.33 KB	-
920.chunk.js	bundled gzip	0 Bytes -> 54.98 KB (+54.98 KB) 0 Bytes -> 17.08 KB	-
912.chunk.js	bundled gzip	0 Bytes -> 44.37 KB (+44.37 KB) 0 Bytes -> 14.31 KB	-
699.chunk.js	bundled gzip	0 Bytes -> 26.39 KB (+26.39 KB) 0 Bytes -> 6.14 KB	-

Removed

No assets were removed

Bigger

Asset	Type	File Size	% Changed
manifest.json	bundled gzip	91 Bytes -> 551 Bytes (+460 Bytes) N/A -> 151 Bytes	+505.49%

Smaller

Asset	Type	File Size	% Changed
app.bundle.js	bundled gzip	1.29 MB -> 1.04 MB (-254.35 KB) N/A -> 297.38 KB	-19.29%

Unchanged

No assets were unchanged

github-actions · 2022-07-29T14:58:49Z

Bundle Stats-Non existant

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Type	Total bundle size	% Changed
0	bundled	0 Bytes	0%

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

No assets were unchanged

github-actions · 2022-07-29T14:58:50Z

Bundle Stats-No changes

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Type	Total bundle size	% Changed
7	bundled gzip	1.34 MB 386.44 KB	0%

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	Type	File Size	% Changed
app.bundle.js	bundled gzip	1.04 MB 297.38 KB	0%
296.chunk.js	bundled gzip	124.57 KB 35.05 KB	0%
288.chunk.js	bundled gzip	57.24 KB 16.33 KB	0%
920.chunk.js	bundled gzip	54.98 KB 17.08 KB	0%
912.chunk.js	bundled gzip	44.37 KB 14.31 KB	0%
699.chunk.js	bundled gzip	26.39 KB 6.14 KB	0%
manifest.json	bundled gzip	551 Bytes 151 Bytes	0%

iansan5653

Looks great to me.

Doesn't have to be this PR, but what do you think of adding indicator icons to the table to make it more scannable? Something like 🔴 for increase, 🟢 for decrease? Or alternatively 📈 / 📉 .

mattcosta7 · 2022-07-29T16:57:36Z

One question re the changset here - do we want to account for things like "which bundles are these in"

A single webpack stats.json might have multiple output files (which are the things this action compares currently). Single files in a bundle might exist in multiple bundles. Should we link back to the files these items are bundled in somehow to display this?

camchenry · 2022-07-29T16:58:08Z

Looks great to me.

Doesn't have to be this PR, but what do you think of adding indicator icons to the table to make it more scannable? Something like 🔴 for increase, 🟢 for decrease? Or alternatively 📈 / 📉 .

I love it! I had the same thought, but I think we can do that in a follow-up PR and experiment with some different indicators.

mattcosta7 · 2022-07-29T16:58:47Z

Should we add an additional 'workflow' that outputs something with a changeset that displays on every PR?

https://github.com/github/webpack-bundlesize-compare-action/blob/main/.github/workflows/test.yml#L23-L49

camchenry · 2022-07-29T17:11:25Z

One question re the changset here - do we want to account for things like "which bundles are these in"

A single webpack stats.json might have multiple output files (which are the things this action compares currently). Single files in a bundle might exist in multiple bundles. Should we link back to the files these items are bundled in somehow to display this?

Great point! Currently the modules are flattened out to just a single list, but we are accessing them via chunk.modules.modules, so it wouldn't be hard to include which chunk each module is part of, or generate a separate table of files for each chunk, depending on how we want to display it. For example:

Chunk 1

(table of files)

Chunk 2

(table of files)

Or alternatively, show the chunk each file belongs to:

Changeset

File	Size	% changed
chunk 1 / file 1	...	...
chunk 2 / file 1	...	...
chunk 1 / file 2	...	...
chunk 1 / file 3	...	...
chunk 2 / file 2	...	...

Should we add an additional 'workflow' that outputs something with a changeset that displays on every PR?

https://github.com/github/webpack-bundlesize-compare-action/blob/main/.github/workflows/test.yml#L23-L49

Good call, I'll update the workflows.

github-actions · 2022-07-29T17:17:17Z

Bundle Stats-With chunk and module information

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Type	Total bundle size	% Changed
2	bundled	1.98 MB	0%

Changeset

File	Size	% Changed
./src/client/this-file-was-added.ts	0 Bytes -> 1.46 KB (+1.46 KB)	-
./src/client/this-file-grew-larger.tsx	562 Bytes -> 762 Bytes (+200 Bytes)	+35.59%
./src/client/helpers/this-file-grew-smaller.ts	2.46 KB -> 2.26 KB (-200 Bytes)	-7.94%
./src/client/this-file-will-be-deleted.ts	1.46 KB -> 0 Bytes (-1.46 KB)	-100%

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset	Type	File Size	% Changed
app.bundle.js	bundled	1.98 MB	0%
manifest.json	bundled	91 Bytes	0%

github-actions · 2022-07-29T17:17:21Z

Bundle Stats-Non existent

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count	Type	Total bundle size	% Changed
0	bundled	0 Bytes	0%

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

No assets were unchanged

camchenry · 2022-07-29T17:43:59Z

@mattcosta7 I added another workflow with changeset information. Regarding handling multiple chunks, I think we can handle this whenever we start splitting up more files by route and such, but for now it's not a common usecase, so it could just be a follow-up later.

camchenry added 4 commits July 28, 2022 21:56

Add new test files

5529a56

Add chunk module diff table

72ec7e2

Allow possibility of chunk diff not existing

5730d41

Fix capitalization of GitHub and add link

b3948ae

camchenry requested a review from a team July 29, 2022 14:57

camchenry requested a review from a team as a code owner July 29, 2022 14:58

camchenry added 2 commits July 29, 2022 15:09

Update dist

88302dc

Merge branch 'main' into add-module-size-analysis

5de68ac

camchenry requested review from a team, mattcosta7 and iansan5653 July 29, 2022 16:37

iansan5653 approved these changes Jul 29, 2022

View reviewed changes

Add workflow with changeset

0f45817

camchenry merged commit 00123e5 into main Aug 1, 2022

camchenry deleted the add-module-size-analysis branch August 1, 2022 14:06

mattcosta7 mentioned this pull request Sep 30, 2022

Remove changeset output? #215

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add module size analysis #155

Add module size analysis #155

camchenry commented Jul 29, 2022 •

edited

github-actions bot commented Jul 29, 2022 •

edited

github-actions bot commented Jul 29, 2022 •

edited

github-actions bot commented Jul 29, 2022 •

edited

github-actions bot commented Jul 29, 2022 •

edited

iansan5653 left a comment

mattcosta7 commented Jul 29, 2022

camchenry commented Jul 29, 2022 •

edited

mattcosta7 commented Jul 29, 2022 •

edited

camchenry commented Jul 29, 2022

github-actions bot commented Jul 29, 2022

github-actions bot commented Jul 29, 2022

camchenry commented Jul 29, 2022

Add module size analysis #155

Add module size analysis #155

Conversation

camchenry commented Jul 29, 2022 • edited

Bundle Stats

github-actions bot commented Jul 29, 2022 • edited

Bundle Stats

github-actions bot commented Jul 29, 2022 • edited

Bundle Stats-Flipped around

github-actions bot commented Jul 29, 2022 • edited

Bundle Stats-Non existant

github-actions bot commented Jul 29, 2022 • edited

Bundle Stats-No changes

iansan5653 left a comment

Choose a reason for hiding this comment

mattcosta7 commented Jul 29, 2022

camchenry commented Jul 29, 2022 • edited

mattcosta7 commented Jul 29, 2022 • edited

camchenry commented Jul 29, 2022

github-actions bot commented Jul 29, 2022

Bundle Stats-With chunk and module information

github-actions bot commented Jul 29, 2022

Bundle Stats-Non existent

camchenry commented Jul 29, 2022

camchenry commented Jul 29, 2022 •

edited

github-actions bot commented Jul 29, 2022 •

edited

github-actions bot commented Jul 29, 2022 •

edited

github-actions bot commented Jul 29, 2022 •

edited

github-actions bot commented Jul 29, 2022 •

edited

camchenry commented Jul 29, 2022 •

edited

mattcosta7 commented Jul 29, 2022 •

edited