# Bundle size

> [llms.txt](https://zriz.dev/llms.txt)

What each set of imports adds to your bundle, minified and compressed with Brotli.

## First load

| Set | Imports | Brotli |
| - | - | - |
| Editor | Every part from `@zriz/react/cropper` | 32.03 kB |
| Avatar | `Root`, `Viewport`, `Image`, `Mask`, `Area` | 25.38 kB |
| Root only | `Root` | 18.09 kB |
| Vanilla avatar | `createCropper`, `loadImage`, `attachImage`, `bindViewport`, `bindPhoto`, `bindMask` and `bindArea` | 20.74 kB |
| Server | `toSharp` from `@zriz/core` | 723 B |
| Stylesheet | `styles.css`, which is optional | 973 B |

Measured with size-limit 14.3.0 on the 0.0.0 packages. It bundles each set with Rolldown 1.2.15, minifies it with Oxc and leaves out React and react-dom. It compresses each output file with Brotli at quality 11, adds the files up and subtracts the 18 B that size-limit measures for an empty project. 1 kB is 1000 B. The build uses the `production` export condition, so development warnings do not count.

With gzip, the stylesheet is 1111 B.

The same sets built with Rollup 4, Vite 7 and 8, webpack 5 and Next 16, with Turbopack or webpack, come out between 2.2% smaller and 7.4% larger. esbuild comes out up to 16.3% larger.

esbuild ignores the `production` condition unless you pass it, so it ships the development warnings. Pass `conditions: ["module", "production"]` in production builds. `module` keeps the condition esbuild sets by default.

## Loaded later

Four chunks stay out of the first load and download the first time a photo needs them. Each row is what the chunk adds to the avatar set:

| Chunk | Loads when | Brotli |
| - | - | - |
| Render | The first export. It starts downloading once the first photo attaches | 2.94 kB |
| Sharpen | The sharper redraw at rest and on deep zoom. It starts downloading after the first paint | 546 B |
| SVG | The photo is an SVG | 2.13 kB |
| Source | You pass an `img`, `video`, `canvas`, `OffscreenCanvas` or `ImageBitmap` to `loadImage`, or your `decode` option runs after the browser fails to decode. `Root` never loads it | 557 B |

With all four chunks, even `source`, which `Root` never loads, the avatar set comes to 31.55 kB. Rolldown, Rollup, Vite, webpack and Next keep the code a chunk shares with the first load in the first load, so the chunks stay this small. esbuild splits that code into chunks of its own. A chunk bundled alone is larger: `render` is 3.68 kB.

## Dependencies

`@zriz/react` has `@zriz/core` and React as peers and no dependencies. `@zriz/core` has none either. Both packages mark only their CSS as a side effect, so Rollup, Vite, webpack and Next drop every part you do not import. esbuild drops their code too, but it still writes the four lazy chunks next to your bundle, even for a part such as `Rotate` that never loads them.