Cutting a Next.js bundle from 34 MB to 6 MB for Cloudflare Workers

The first build of GAIA’s web app against @opennextjs/cloudflare produced a handler.mjs weighing 34 MB raw and 10.5 MB gzipped. Cloudflare Workers caps a paid-plan upload at 10 MB on the wire. The deploy refused. Worse, OpenNext’s bundler flattens dynamic imports, so the usual “make it tree-shakeable” advice didn’t apply — the entire dependency closure of every route had been concatenated into one file. The mission was to get the wire size under 10 MB without giving up i18n, MDX rendering, or any of the marketing surface area.

I started by spinning the work into an isolated worktree at ~/Projects/GAIA/gaia-cf-size-debug off develop so the user’s WhatsApp WIP stayed clean, then wrote cf-build.sh for reproducible local builds. Next 16’s bundle analyzer doesn’t cooperate with Turbopack, so I parsed the actual handler.mjs — looking for __commonJS({"…path…"}) markers byte-by-byte with a Python script to attribute every megabyte to a real source path. The 58 MB pre-minify breakdown told the story: 21 MB of i18n JSON across five features times seven locales, 4 MB of SEO data files (alternativesData, comparisonsData, glossaryData, combosData), then mermaid at 1.3 MB, refractor at 0.8 MB, cytoscape at 0.4 MB, katex at 0.27 MB, tiptap at 0.37 MB. None of that should have been in a request handler.

The first cuts came easily. next.config.mjs aliased cytoscape via the webpack hook — but Turbopack ignores webpack config, so the alias had to move to turbopack.resolveAlias pointing at a no-op apps/web/scripts/empty-module.mjs stub that exports a Proxy. That saved 0.7 MB. Then StandardCodeBlock.tsx was synchronously importing react-syntax-highlighter’s PrismAsyncLight plus all 277 refractor language definitions; wrapping the whole component in dynamic({ ssr: false }) saved another 1.1 MB.

The big win was the data migration. I wrote a build-time/edge-runtime loader at src/i18n/loadFeatureTranslations.ts and src/lib/feature-data.ts with a three-stage fallback chain: node:fs/promises at build, getCloudflareContext().env.ASSETS.fetch() at runtime on Cloudflare, plain HTTP on Vercel. Then I moved every i18n bundle from src/features/*/i18n/*.json into apps/web/public/data/i18n/{feature}/{locale}.json, deleted the source folders, and rewrote five getTranslated*.ts callers — 22 MB out of the bundle. Same pattern for the SEO data: 53 alternatives, 100 comparisons, 179 glossary terms, 214 combos, 34 personas all lifted from barrel-imported TypeScript into per-slug JSONs under public/data/{feature}/{slug}.json, with eight call sites (feed.xml, sitemapData, alternative-to/[slug]/page.tsx, and friends) made async. Another 4.9 MB gone.

Then a wall. Next 16 renamed middleware.ts to proxy.ts and forbade export const runtime = "edge", but @opennextjs/cloudflare rejects Node-runtime middleware. Mid-build I patched .next/server/functions-config-manifest.json to drop the /_middleware entry — a debug hack that produced a green build but broke locale auto-detection at runtime. An Explore subagent dug through OpenNext-Cloudflare issues #962 and #972 and surfaced maintainer @vicb confirming proxy.ts won’t be supported until the adapters-API rewrite. The workaround was almost insulting in its simplicity: git mv proxy.ts middleware.ts and rename the export. Next 16 still accepts the legacy filename with only a deprecation warning and defaults it to edge runtime. After the rename, mermaid and katex finally fell out of the bundle — they’d been dragged in transitively via the proxy chain — framework chunks dropped 1.4 MB, deps dropped 1.8 MB. Final handler.mjs: 24.8 MB raw, 6.0 MB gzipped. Total wrangler upload: 27.1 MB raw, 7.2 MB gzipped, verified with wrangler deploy --dry-run --outdir=/tmp/wrangler-dry-out. I also caught the unused 26.4 MB landing_recording.mp4 (over Cloudflare’s 25 MB per-asset cap) and confirmed it had zero source references before the user approved deletion.