Bundle size
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.16 kB |
| Avatar | Root, Viewport, Image, Mask, Area | 25.42 kB |
| Root only | Root | 18.15 kB |
| Vanilla avatar | createCropper, loadImage, attachImage, bindViewport, bindPhoto, bindMask and bindArea | 20.81 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.59 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.