siddharthkp / bundlesize2

Keep your bundle size in check - version 2

 

 

Hi, I'm Sid 👋

Thinking about components and ways of making them

 

Projects available only to sponsors:

UI Devtools for Tailwind CSS - The missing browser devtools for Tailwind CSS

 

About Me:

• now: staff design systems engineer at GitHub


• past: developer at CodeSandbox, design systems at Auth0, frontend architect at Practo


• Built bundlesize, React UI, tinyreact.email and more
  45M downloads on npm · 10.9K stars on GitHub


• I give talks about React and Design Systems
  watch past talks

Thank you to the folks who sponsor my work:

bundlesize2's Issues

Error "HttpError: Invalid request" (Only 65535 characters are allowed; 68372 were supplied)

I was very excited to see bundlesize2 now exists! We have a lot of JS files being built by our deployment process, and bundlesize was unable to generate a valid details link in GitHub (the URL was too long).

Unfortunately this version also has an error, perhaps related to the number of files being checked:

⚠️ Could not add check
 

 
        Something broke pretty bad!
 

 
        Please create an issue with this error message: HttpError: Invalid request.


 
Only 65535 characters are allowed; 68372 were supplied.

This was built with CircleCI. I've attached the full logs for your reference: bundlesize2-error.log.txt

Unable to accurately report on precompressed files

Scenario:

I precompress my files with Brotli already, so I don't need bundlesize to do this. I write my config like this:

    {
      "path": "./scripts/*.js.br",
      "maxSize": "600kb",
      "compression": "none"
    }

Problem:
Bundlesize reports inaccurate results. My 528kb Brotli file is reported at 933kb. I think this is because of Buffer.byteLength:

bundlesize2/cli/src/utils/compressed-size.js

Lines 13 to 15 in 7001340

	case 'none':
	default:
	size = Buffer.byteLength(data)

I thought maybe if I set compression to "brotli" it would be more accurate, but somehow my file goes from 528kb to 395kb, which I don't think is possible.

Solution:
A possible solution here would be to just use fs.statSync. We already have the file path, and that will give us the size of the file already.

What do you think?

Bump version to get latest changes

Heya @siddharthkp, can you bump the package version so I can install the latest commit?

[Docs] How to display the size difference relative to master

Great package, overall it's working really well!

In your docs you have a screenshot of the GitHub Checks that includes the note: 0.2kb larger than master, careful!

I would also like to highlight the size difference relative to Master in my Check message, but I don't see how this is possible as there's nothing in the docs about it?

I can only figure out how to check if the files are under a certain threshold– currently the check just says 50 checks passed because all 50 checked files are below their stated limit. This is good but not great– it would be much more useful to see how much is has increased rather than just a binary pass/fail. I see that this is possible, but I don't see how to do it.

My bundlesize.config.json is basically just:

  "files": [
    {
      "path": "<path1>",
      "path": "<path2>",
      "maxSize": "400kb"
    },
    {
      "path": "<path3>",
      "maxSize": "200kb"
    },
    {
      "path": "<path4>",
      "maxSize": "150kb"
    },
    {
      "path": "<path5>",
      "maxSize": "50kb"
    }
  ]

Thank you!

(path names made generic because I don't think it adds anything)

License field

Hi,

Similar to this can you also set the license in package.json? This helps with auto-detecting licensing issues

Feature request: link to CircleCI build

This will differ based on the CI environment, but within CircleCI at least there is a build URL environment variable CIRCLE_BUILD_URL. How about using this as the details_url so that clicking it takes you to the failing build?

For a bit more context, the reason I thought to do this is because we've added some helpful hints to the CLI output (by detecting the exit code and echoing), it'd be useful for people to find it more easily.

Ability to completely disable caching

We're using the CLI version of bundlesize2 in a private GH org. and don't want (or require) the caching functionality. In fact it appears GHES security policies are blocking the request, causing a big ugly error in our pipeline before the results are printed.

Are contributions welcome? I would like to introduce an optional configuration option to opt-out of caching.

This has also been requested here.

bundlesize cache broken

https://bundlesize-cache.vercel.app/

Broken SVG image for pass/fail image

It seems that the default branch has been changed from master to main, resulting in broken images within GitHub checks.

The image URL is currently pointing to:

• /siddharthkp/bundlesize2/master/github-reporter/public/check-*.svg

but I think it now needs to be:

• /siddharthkp/bundlesize2/main/github-reporter/public/check-*.svg

Broken check due to server error

When running the bundlesize command I am getting a server error when fetching the cached bundlesize:

> [email protected] bundlesize
> bundlesize --enable-github-checks

FetchError: invalid json response body at https://bundlesize-cache.vercel.app/?repo=jonkoops/Leaflet reason: Unexpected token A in JSON at position 0
    at /home/runner/work/Leaflet/Leaflet/node_modules/node-fetch/lib/index.js:273:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.get (/home/runner/work/Leaflet/Leaflet/node_modules/bundlesize2/src/pipeline/cache.js:9:12)
    at async Object.read (/home/runner/work/Leaflet/Leaflet/node_modules/bundlesize2/src/pipeline/cache.js:50:27)
    at async run (/home/runner/work/Leaflet/Leaflet/node_modules/bundlesize2/index.js:22:25) {
  type: 'invalid-json'
}

─ dist/leaflet.js
  ✖ dist/leaflet.js    140.35KB > 140 kb no compression  

─ dist/leaflet.js
  ✖ dist/leaflet.js    40.39KB > 40 kb gzip  

  2 checks failed   

Added check to GitHub
Error: Process completed with exit code 1.

For more information see the run in Github Actions: https://github.com/jonkoops/Leaflet/runs/4803353449

Bundlesize2 checks failing on service

Since yesterday afternoon, Jan 17 2023 in the mid-afternoon, all Bundlesize2 checks seem to be failing with the error:

> bundlesize "--enable-github-checks"

/home/vsts/work/1/s/node_modules/node-fetch/lib/index.js:1519
			destroyStream(response.body, err);
			                       ^

TypeError: Cannot read property 'body' of null
    at /home/vsts/work/1/s/node_modules/node-fetch/lib/index.js:1519:27
    at IncomingMessage.<anonymous> (/home/vsts/work/1/s/node_modules/node-fetch/lib/index.js:1749:6)
    at Object.onceWrapper (events.js:519:28)
    at IncomingMessage.emit (events.js:400:28)
    at TLSSocket.socketCloseListener (_http_client.js:441:11)
    at TLSSocket.emit (events.js:412:35)
    at net.js:686:12
    at TCP.done (_tls_wrap.js:564:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

We've had to disable Bundlesize in our CI as we rely on it, so I'm opening this issue to keep tabs on whether this issue in the service will be fixed.

Appreciate the hard work put into this project, we'd hate to see it go away silently 🦾

Weird output compared to v1

➜  snoo-wrapped git:(main) ✗ ./node_modules/bundlesize/index.js 
 PASS  ./dist/snoo-wrapped.js: 10.59KB < maxSize 20KB (brotli) 

 PASS  ./dist/snoo-wrapped.js: 11.95KB < maxSize 20KB (gzip) 

 PASS  ./dist/snoo-wrapped.js: 55.61KB < maxSize 90KB (no compression) 

➜  snoo-wrapped git:(main) ✗ ./node_modules/bundlesize2/index.js

─ ./dist/snoo-wrapped.js
  ─ ./dist/snoo-wrapped.js    deduplicated  

─ ./dist/snoo-wrapped.js
  ─ ./dist/snoo-wrapped.js    deduplicated  

─ ./dist/snoo-wrapped.js
  ✔ ./dist/snoo-wrapped.js    55.61KB < 90 kB none  

  1 check passed

Allow a given bundle-size configuration/path/glob to aggregate the file sizes into one summation number

With this configuration,

{
  "path": "./dist/*.js",
  "maxSize": "3 kB"
}

instead of this

─ ./dist/*.js
  √ ./dist/index.js    91B < 3 kB gzip
  √ ./dist/types.js    65B < 3 kB gzip
  √ ./dist/utils.js    293B < 3 kB gzip

add a flag that outputs one path/glob summation for file size

─ ./dist/*.js
  √ ./dist/*.js   449B < 3 kB gzip

Here's a suggestion for that flag/interface for this option:

{
  "path": "./dist/*.js",
  "maxSize": "3 kB",
  "sum": true
}

How does this work with matrix builds?

For example I have 4 jobs that run, one for each node version.

When the action runs for this the result be

A. The first job to succeed?
B. The results all merged?
C. Something else?

https://github.com/OmgImAlexis/pm4/actions/runs/1275999519
https://github.com/OmgImAlexis/pm4/runs/3714564319