Know what shipped instantly,
and what fell out

1$ next build && npx crust diff main
2
3crust diff cfdcf500 → 4a802397
4
5/products/[slug] 543.2 kB +0.0 kB
6    shell 100% → 45%
7    ✂ <ProductGallery> left the shell
8      uncached fetch at lib/http.ts:3
9
102 budget breaches · exit 1

1{
2  "defaultFirstLoadBytes": 250000,
3  "firstLoadBytes": {
4    "/products/[slug]": 180000
5  },
6  "maxGrowth": 0.05,
7  "defaultMinShellRatio": 0.6
8}
9
10// bytes, growth and shell ratio — a check that
11// only guards bytes passes a halved shell

1'use client'
2
3import { useEffect } from 'react'
4
5export function CrustDevtools() {
6  useEffect(() => {
7    if (!process.env.NEXT_PUBLIC_CRUST) return
8    import('crust/widget').then((m) => m.mountCrustWidget())
9  }, [])
10
11  return null
12}