[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	60edf24
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6836fa8955028800080be00e
😎 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 d27e8c2.

Total Size Change: +1.34MB^(0.00%) - Total Gzip Change: +455KB^(0.00%)
Files: 40 total (40 added, 0 removed, 0 changed)

@base-ui-components/react parsed:^{${\tiny{\color{orangered}▲}}$}+292KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+88.3KB^(new)
@base-ui-components/react/menu parsed:^{${\tiny{\color{orangered}▲}}$}+114KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+37.6KB^(new)
@base-ui-components/react/context-menu parsed:^{${\tiny{\color{orangered}▲}}$}+112KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+36.6KB^(new)
@base-ui-components/react/select parsed:^{${\tiny{\color{orangered}▲}}$}+110KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+36.8KB^(new)
@base-ui-components/react/popover parsed:^{${\tiny{\color{orangered}▲}}$}+85.6KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+28.8KB^(new)
@base-ui-components/react/tooltip parsed:^{${\tiny{\color{orangered}▲}}$}+63.3KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+21.4KB^(new)
@base-ui-components/react/preview-card parsed:^{${\tiny{\color{orangered}▲}}$}+58.6KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+19.9KB^(new)
@base-ui-components/react/dialog parsed:^{${\tiny{\color{orangered}▲}}$}+52.2KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+17.5KB^(new)
@base-ui-components/react/alert-dialog parsed:^{${\tiny{\color{orangered}▲}}$}+51.9KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+17.4KB^(new)
@base-ui-components/react/number-field parsed:^{${\tiny{\color{orangered}▲}}$}+28.8KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+10.3KB^(new)

Show 30 more bundle changes

@base-ui-components/react/tabs parsed:^{${\tiny{\color{orangered}▲}}$}+26.5KB^(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.5KB^(new)
@base-ui-components/react/slider parsed:^{${\tiny{\color{orangered}▲}}$}+24.5KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+9.2KB^(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.3KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+7.74KB^(new)
@base-ui-components/react/menubar parsed:^{${\tiny{\color{orangered}▲}}$}+19.6KB^(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.84KB^(new)
Base UI checkbox parsed:^{${\tiny{\color{orangered}▲}}$}+18.4KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+6.91KB^(new)
@base-ui-components/react/checkbox parsed:^{${\tiny{\color{orangered}▲}}$}+18.4KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+6.91KB^(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.5KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+5.57KB^(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.7KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+5.26KB^(new)
@base-ui-components/react/input parsed:^{${\tiny{\color{orangered}▲}}$}+10.9KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+4.36KB^(new)
@base-ui-components/react/toggle parsed:^{${\tiny{\color{orangered}▲}}$}+8.99KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+3.66KB^(new)
@base-ui-components/react/checkbox-group parsed:^{${\tiny{\color{orangered}▲}}$}+8.38KB^(new) gzip:^{${\tiny{\color{orangered}▲}}$}+3.48KB^(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 60edf24

[pkg-pr-new]

Open in StackBlitz

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

commit: 9160734

[Janpot]

I noticed that the icons in the bundle size report look unreadable in light mode:

Will change it to something that works better for both themes:

[oliviertassinari]

For #201

[Janpot]

Oh, and mind you that I updated it to allow for arbitrary code if you want to check something custom:

// bundle-size/bundle-size-checker.config.mjs

      {
        id: 'custom-entry',
        code: `
          import { Field } from '@base-ui-components/react/field';
          console.log(Field.Root, Field.Label);
        `,
        externals,
      },

(Doesn't accept jsx yet I just noticed, but will look into that)

[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 I don't trust bundlephobia too much. They, for instance, measure the data grid at 47B. No idea how they work exactly under the hood.