[code-infra] Add bundle size monitor

[Janpot]

Porting the bundle size monitor from core. This establishes a baseline. This bundles each entrypoint with its dependencies. Bundles are stored in S3 for comparison. Peer dependencies are ignored. To inspect the created bundles run

pnpm size:why

examples:

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	f1f2b1f
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6838276971600b00080e20b6
😎 Deploy Preview	https://deploy-preview-1791--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mui-bot]

Bundle size report

🚫 No bundle size snapshot found for base commit 4285f43.

Total Size Change: +1.45MB^(0.00%) - Total Gzip Change: +491KB^(0.00%)
Files: 41 total (41 added, 0 removed, 0 changed)

@base-ui-components/react parsed:^{${\tiny{\color{orangered}▲}}$}+308KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+92.6KB^(new)
@base-ui-components/react/menu parsed:^{${\tiny{\color{orangered}▲}}$}+114KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+37.8KB^(new)
@base-ui-components/react/context-menu parsed:^{${\tiny{\color{orangered}▲}}$}+113KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+36.9KB^(new)
@base-ui-components/react/select parsed:^{${\tiny{\color{orangered}▲}}$}+111KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+37.1KB^(new)
@base-ui-components/react/popover parsed:^{${\tiny{\color{orangered}▲}}$}+86.1KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+29KB^(new)
@base-ui-components/react/navigation-menu parsed:^{${\tiny{\color{orangered}▲}}$}+84.9KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+28.5KB^(new)
@base-ui-components/react/tooltip parsed:^{${\tiny{\color{orangered}▲}}$}+63.9KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+21.6KB^(new)
@base-ui-components/react/preview-card parsed:^{${\tiny{\color{orangered}▲}}$}+59.2KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+20.2KB^(new)
@base-ui-components/react/dialog parsed:^{${\tiny{\color{orangered}▲}}$}+52.5KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+17.6KB^(new)
@base-ui-components/react/alert-dialog parsed:^{${\tiny{\color{orangered}▲}}$}+52.2KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+17.5KB^(new)

Show 31 more bundle changes

@base-ui-components/react/number-field parsed:^{${\tiny{\color{orangered}▲}}$}+28.9KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+10.3KB^(new)
@base-ui-components/react/tabs parsed:^{${\tiny{\color{orangered}▲}}$}+26.6KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+9.15KB^(new)
@base-ui-components/react/toast parsed:^{${\tiny{\color{orangered}▲}}$}+26.4KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+9.52KB^(new)
@base-ui-components/react/slider parsed:^{${\tiny{\color{orangered}▲}}$}+24.5KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+9.22KB^(new)
@base-ui-components/react/accordion parsed:^{${\tiny{\color{orangered}▲}}$}+23.1KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+7.98KB^(new)
@base-ui-components/react/radio-group parsed:^{${\tiny{\color{orangered}▲}}$}+20.4KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+7.76KB^(new)
@base-ui-components/react/menubar parsed:^{${\tiny{\color{orangered}▲}}$}+19.7KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+7.34KB^(new)
@base-ui-components/react/toolbar parsed:^{${\tiny{\color{orangered}▲}}$}+19.6KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+6.85KB^(new)
Base UI checkbox parsed:^{${\tiny{\color{orangered}▲}}$}+18.7KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+7.01KB^(new)
@base-ui-components/react/checkbox parsed:^{${\tiny{\color{orangered}▲}}$}+18.7KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+7.01KB^(new)
@base-ui-components/react/collapsible parsed:^{${\tiny{\color{orangered}▲}}$}+18.1KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+6.28KB^(new)
@base-ui-components/react/scroll-area parsed:^{${\tiny{\color{orangered}▲}}$}+15.8KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+5.63KB^(new)
@base-ui-components/react/radio parsed:^{${\tiny{\color{orangered}▲}}$}+15KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+5.7KB^(new)
@base-ui-components/react/switch parsed:^{${\tiny{\color{orangered}▲}}$}+14.6KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+5.59KB^(new)
@base-ui-components/react/toggle-group parsed:^{${\tiny{\color{orangered}▲}}$}+13.8KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+5.36KB^(new)
@base-ui-components/react/field parsed:^{${\tiny{\color{orangered}▲}}$}+13.8KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+5.28KB^(new)
@base-ui-components/react/checkbox-group parsed:^{${\tiny{\color{orangered}▲}}$}+12.1KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+4.77KB^(new)
@base-ui-components/react/input parsed:^{${\tiny{\color{orangered}▲}}$}+10.9KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+4.38KB^(new)
@base-ui-components/react/toggle parsed:^{${\tiny{\color{orangered}▲}}$}+8.99KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+3.66KB^(new)
@base-ui-components/react/utils parsed:^{${\tiny{\color{orangered}▲}}$}+8.17KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+3.15KB^(new)
@base-ui-components/react/progress parsed:^{${\tiny{\color{orangered}▲}}$}+7.48KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+3.04KB^(new)
@base-ui-components/react/meter parsed:^{${\tiny{\color{orangered}▲}}$}+7.36KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+3.03KB^(new)
@base-ui-components/react/avatar parsed:^{${\tiny{\color{orangered}▲}}$}+7.22KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+2.89KB^(new)
@base-ui-components/react/fieldset parsed:^{${\tiny{\color{orangered}▲}}$}+5.93KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+2.47KB^(new)
@base-ui-components/react/form parsed:^{${\tiny{\color{orangered}▲}}$}+5.74KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+2.46KB^(new)
@base-ui-components/react/separator parsed:^{${\tiny{\color{orangered}▲}}$}+4.28KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+1.84KB^(new)
@base-ui-components/react/use-render parsed:^{${\tiny{\color{orangered}▲}}$}+3.84KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+1.67KB^(new)
@base-ui-components/react/unstable-use-media-query parsed:^{${\tiny{\color{orangered}▲}}$}+1.95KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+941B^(new)
@base-ui-components/react/merge-props parsed:^{${\tiny{\color{orangered}▲}}$}+1.55KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+764B^(new)
@base-ui-components/react/unstable-no-ssr parsed:^{${\tiny{\color{orangered}▲}}$}+1.27KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+681B^(new)
@base-ui-components/react/direction-provider parsed:^{${\tiny{\color{orangered}▲}}$}+644B^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+390B^(new)

Details of bundle changes

Generated by 🚫 dangerJS against f1f2b1f

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@1791

commit: f1f2b1f

[Janpot]

This is unnecessary if @base-ui-components/react adds an export condition for ./package.json. Then we can just return entrypoint from this function and the bundle size monitor will infer the externals from the peer dependencies. Right now it has no real way to find the package.json location reliably for a module. (besides using a custom resolver)

[michaldudak]

I don't mind exporting package.json. Can you do it in this PR or prefer me to open a new one?

[Janpot]

had it before in this PR, will bring it back.

[Janpot]

I've seen that many packages adopted this convention, it will become obsolete though once findPackageJSON becomes more stable

[michaldudak]

I checked https://bundlephobia.com/package/@base-ui-components/[email protected] and it shows drastically different values. Do you have any idea where this difference might come from?
One reason could be measuring a different version (alpha.8 vs. the latest master), but it's hard to believe we almost doubled the library size since the latest release.

[Janpot]

bundlejs also measures around 100KB gzipped

Bundle size is 316 kB -> 100 kB (gzip)

In general we should be wary of bundlephobia stats. They for instance also measure the data grid at 47B.

[michaldudak]

All right, let's see it in action.

[Janpot]

Also working on an experimental vite version of the bundle size monitor, it shows similar results to the webpack one within a tolerance of ~1KB.

bundlephobia is built with package-build-stats. Looks like they also do a webpack build and analyze the stats.json, with externals from peer dependencies. Haven't looked any deeper yet how they calculate their sizes.