Bundle size increases by 137 KB after adding only one component

[uh-zuh]

I have added my first component (DatePicker) from Bits UI and after that my bundle size increases significanly.

I have used flamegraph generated by KusStar/vite-bundle-visualizer to collect sizes of new packages in my bundle.

After adding one DatePicker from Bits UI there are follwing new packages (with Gzip sizes) in my bundle:

• bits-ui/dist - 71.51 KB
• @internationalized/date/dist - 17.71 KB
• @floating-ui - 15.18 KB
• tabbable/dist/index.esm.js - 7.84 KB
• svelte-toolbelt/dist - 7.02 KB
• phosphor-svelte/lib - 5.33 KB
• runed/dist - 3.65 KB
• inline-style-parser/index.js - 1.82 KB
• style-to-object - 7.07 KB

SUM: 137 KB (Gzip)

My bundle size:

• Before adding - 117.32 KB
• After adding - 267.73 KB

DIFF: 150 KB (Gzip)

There is one more significant increase in svelte/src (+15KB, Gzip) but it is ok, I think.

Main question:
Is it normal that adding one component increases bundle size by 137 KB (Gzip)?

[uh-zuh]

I have updated sizes to be more accurate when converting between bytes and kilobytes.

[huntabyte]

You just so happened to add one of the biggest and most complex components, consisting of technically 3 components in one (Date Field, Popover, and Calendar).

[huntabyte]

Also not fair to put Phosphor in that list as the icons are just provided in the examples, they aren't actually shipped with Bits UI.

[uh-zuh]

Ok :)
The main conclusion - there are no mistakes in my calculations and no ways to optimize it, right?
Technically I agree about Phosphor but icons for DatePicker are needed in any case hence additional size for icons is needed in any case.

[ivodolenc]

Hi, first of all, awesome work on bits-ui, shadcn-svelte, runed etc., great projects!

As mentioned above, I recently ran into a problem when importing only the Popover component as documented in bits-ui. The dev cold start becomes drastically slower, about 2 to 3 times slower than usual.

When I remove the Popover, everything immediately returns to normal without any issues. I'm working on a documentation site using the latest SvelteKit and bits-ui, with the adapter-static.

I also noticed that when building the project (which contains around 20–30 markdown pages) without the Popover component, it processes roughly 300 modules and the final output size is about 1MB. But when I include Popover (only raw code without styling or any other icon lib), the build jumps to over 800 transformed modules and around 1.2MB total which is not terrible, but maybe a bit much for a single component.

I think the issue stems from how Vite handles tree-shaking. It doesn’t fully tree-shake in practice, which affects many component-based projects that use a single entry point importing all modules through a barrel file.

This is a major problem with tabler and lucide icons too, especially when working with Vue, Svelte, and other Vite-based setups. So if I may suggest: it would be great to offer individual imports for each component. That would dramatically improve performance and final bundle size. For example, with lucide icons, I can import just one icon or all if needed.

An improved API might look like:

import { Popover } from 'bits-ui/components/popover'

// or
import { Popover } from 'bits-ui/ui/popover'

Right now I tried something like this:

import { Popover } from 'bits-ui/dist/bits/popover/index.js'

…but that doesn’t work correctly, and the types aren’t resolved either.

I believe this new API wouldn’t introduce any breaking changes, just some additional work to define new export subpaths in package.json, which could be configured once and left as is.

Could you please consider adding this? It would allow us to import only what we truly need and avoid Vite’s tree-shaking bottlenecks.

[huntabyte]

There is a PR where we're working on adding direct export paths like that (will be additive/non breaking)