[Question] How to troubleshoot bundle size

[abuquack]

Enormous 20mb handler.mjs file
I'd like to know if this is normal or not, and how can I minify this further.
Thanks in advance.

┌──────────────────────────────┐
│ OpenNext — Generating bundle │
└──────────────────────────────┘

Bundling middleware function...
Bundling static assets...
Bundling cache assets...
Building server function: default...
Applying code patches: 3.215s
# copyPackageTemplateFiles
⚙️ Bundling the OpenNext server...

Applying code patches:
 - patching require
 - patching cacheHandler
 - patching 'require(this.middlewareManifestPath)'
 - patching `require.resolve` call
All 4 patches applied

Worker saved in `/home/runner/work/*****/*****/*****-app/.open-next/worker.js` 🚀

OpenNext build complete.

┌──────────────────────────────┐
│ OpenNext — Cloudflare deploy                          │
└──────────────────────────────┘

Incremental cache does not need populating
Tag cache does not need populating

 ⛅️ wrangler 4.14.2 (update available 4.14.4)
---------------------------------------------

🌀 Building list of assets...
✨ Read 162 files from the assets directory /home/runner/work/*****/*****/*****-app/.open-next/assets
🌀 Starting asset upload...
🌀 Found 1 new or modified static asset to upload. Proceeding with upload...
+ /BUILD_ID
Uploaded 1 of 1 assets
✨ Success! Uploaded 1 file (110 already uploaded) (0.91 sec)

Total Upload: 20882.97 KiB / gzip: 3425.71 KiB
Your Worker has access to the following bindings:
- D1 Databases:
  - DB: *****-db (8ea17951-13ee-42e3-9ed6-9de8aaee4190)
- R2 Buckets:
  - NEXT_INC_CACHE_R2_BUCKET: *****-cache
  - AVATAR_BUCKET: *****-avatars
- Services:
  - WORKER_SELF_REFERENCE: *****-app
- Assets:
  - Binding: ASSETS
▲ [WARNING] Here are the 5 largest dependencies included in your script:

  - .open-next/server-functions/default/handler.mjs - 20680.43 KiB
  - .open-next/server-functions/default/cache.cjs - 17.53 KiB
  - node_modules/unenv/dist/runtime/node/internal/http2/constants.mjs - 16.52 KiB
  - .open-next/.build/durable-objects/queue.js - 11.55 KiB
  - node_modules/unenv/dist/runtime/node/http2.mjs - 9.87 KiB
  If these are unnecessary, consider removing them



✘ [ERROR] A request to the Cloudflare API (/accounts/***/workers/scripts/*****-app/versions) failed.

  Your Worker exceeded the size limit of 3 MiB. Please upgrade to a paid plan to deploy Workers up to 10 MiB. https://dash.cloudflare.com/***/workers/plans [code: 10027]
  To learn more about this error, visit: https://developers.cloudflare.com/workers/platform/limits/#worker-size

  
  If you think this is a bug, please open an issue at: https://github.com/cloudflare/workers-sdk/issues/new/choose



Cloudflare collects anonymous telemetry about your usage of Wrangler. Learn more at https://github.com/cloudflare/workers-sdk/tree/main/packages/wrangler/telemetry.md
ERROR Wrangler command failed
error: script "cf-deploy" exited with code 1
Error: Process completed with exit code 1.

This is what my package.json looks like:

{
  "name": "Some-App",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "next build",
    "check": "next lint && tsc --noEmit",
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
    "db:push": "drizzle-kit push",
    "db:studio": "drizzle-kit studio",
    "dev": "next dev",
    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
    "format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "preview": "next build && next start",
    "start": "next start",
    "typecheck": "tsc --noEmit",
    "cf-preview": "opennextjs-cloudflare build && NODE_ENV=production opennextjs-cloudflare preview",
    "cf-preview-local": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
    "cf-deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
    "cf-upload": "opennextjs-cloudflare build && opennextjs-cloudflare upload",
    "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
  },
  "dependencies": {
    "@aws-sdk/client-s3": "^3.806.0",
    "@faker-js/faker": "^9.7.0",
    "@hookform/resolvers": "^5.0.1",
    "@libsql/client": "^0.15.4",
    "@radix-ui/react-alert-dialog": "^1.1.13",
    "@radix-ui/react-avatar": "^1.1.9",
    "@radix-ui/react-checkbox": "^1.3.1",
    "@radix-ui/react-dialog": "^1.1.13",
    "@radix-ui/react-dropdown-menu": "^2.1.14",
    "@radix-ui/react-label": "^2.1.6",
    "@radix-ui/react-popover": "^1.1.13",
    "@radix-ui/react-scroll-area": "^1.2.8",
    "@radix-ui/react-select": "^2.2.4",
    "@radix-ui/react-separator": "^1.1.6",
    "@radix-ui/react-tabs": "^1.1.11",
    "@radix-ui/react-tooltip": "^1.2.6",
    "@t3-oss/env-nextjs": "^0.12.0",
    "@tanstack/react-query": "^5.69.0",
    "@tanstack/react-table": "^8.21.3",
    "@trpc/client": "^11.0.0",
    "@trpc/react-query": "^11.0.0",
    "@trpc/server": "^11.0.0",
    "@types/bcryptjs": "^3.0.0",
    "@types/uuid": "^10.0.0",
    "bcryptjs": "^3.0.2",
    "better-auth": "^1.2.7",
    "better-sqlite3": "^11.9.1",
    "date-fns": "^4.1.0",
    "drizzle-orm": "^0.41.0",
    "framer-motion": "^12.10.0",
    "lucide-react": "^0.507.0",
    "next": "^15.2.3",
    "next-intl": "^4.1.0",
    "next-themes": "^0.4.6",
    "react": "^19.0.0",
    "react-day-picker": "8.10.1",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.56.3",
    "react-hot-toast": "^2.5.2",
    "react-icons": "^5.5.0",
    "server-only": "^0.0.1",
    "sonner": "^2.0.3",
    "superjson": "^2.2.1",
    "uuid": "^11.1.0",
    "zod": "^3.24.4"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20250509.0",
    "@eslint/eslintrc": "^3.3.1",
    "@opennextjs/cloudflare": "^1.0.0-beta.4",
    "@radix-ui/react-slot": "^1.2.2",
    "@shadcn/ui": "^0.0.4",
    "@tailwindcss/postcss": "^4.0.15",
    "@types/node": "^20.14.10",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "drizzle-kit": "^0.30.5",
    "eslint": "^9.23.0",
    "eslint-config-next": "^15.2.3",
    "eslint-plugin-drizzle": "^0.2.3",
    "postcss": "^8.5.3",
    "prettier": "^3.5.3",
    "prettier-plugin-tailwindcss": "^0.6.11",
    "tailwind-merge": "^3.2.0",
    "tailwindcss": "^4.0.15",
    "tailwindcss-animate": "^1.0.7",
    "tw-animate-css": "^1.2.9",
    "typescript": "^5.8.2",
    "typescript-eslint": "^8.27.0",
    "wrangler": "^4.14.2"
  },
  "ct3aMetadata": {
    "initVersion": "7.39.3"
  }
}

[abuquack]

First few steps I took:

Analyzing the meta file

at .open-next/server-functions/default/handler.mjs.meta.json:

jq '
  .outputs[".open-next/server-functions/default/handler.mjs"].inputs
  | to_entries
  | sort_by(.value.bytesInOutput)
  | reverse
  | map({
      path: .key,
      bytes: .value.bytesInOutput
    })
' .open-next/server-functions/default/handler.mjs.meta.json

Result:

[
  {
    "path": ".open-next/server-functions/default/node_modules/next/dist/compiled/babel-package
s/packages-bundle.js",
    "bytes": 2148949
  },
  {
    "path": ".open-next/server-functions/default/node_modules/next/dist/compiled/babel/bundle.
js",
    "bytes": 2095848
  },
  {
    "path": "node_modules/next/dist/compiled/@ampproject/toolbox-optimizer/index.js",
    "bytes": 887615
  }
... more ...
]

Analyzing babel package constituents:

By running this python script:

import re
from collections import defaultdict

bundle_path = ".open-next/server-functions/default/node_modules/next/dist/compiled/babel-packages/packages-bundle.js"

with open(bundle_path, "rb") as f:
    data = f.read()

# Convert to string
text = data.decode("utf-8", errors="ignore")

# Regex to find @babel packages
matches = list(re.finditer(r'@babel/[\w\-]+', text))

# Estimate size by difference in positions
sizes = defaultdict(int)
for i in range(len(matches) - 1):
    pkg = matches[i].group(0)
    start = matches[i].start()
    end = matches[i+1].start()
    sizes[pkg] += end - start

# Handle last one
if matches:
    last_pkg = matches[-1].group(0)
    sizes[last_pkg] += len(text) - matches[-1].start()

# Sort and print
for pkg, size in sorted(sizes.items(), key=lambda x: x[1], reverse=True):
    print(f"{pkg:<45} {size / 1024:.2f} KiB")

Result:

@babel/eslint-parser                          635.34 KiB
@babel/runtime                                343.10 KiB
@babel/core                                   138.20 KiB
@babel/plugin-proposal-dynamic-import         64.87 KiB
@babel/plugin-proposal-duplicate-named-capturing-groups-regex 47.81 KiB
@babel/template                               47.12 KiB
@babel/runtime__compatibility                 38.22 KiB
@babel/helpers                                36.01 KiB
@babel/helper-compilation-targets             17.16 KiB
@babel/preset-typescript                      17.01 KiB

3. Wonder about deps

Isn't eslint a dev dependency? why do I see it bundled in end result
sorry if I misunderstood, really trying to upload this to free plan
I'm afraid that if a small app like mine reached 3MiB this fast ,then how much would it reach after full implementation

Thanks in advance

[igoforth]

https://www.npmjs.com/package/@next/bundle-analyzer

[hsab]

Also experiencing this. handler.mjs is close to 19mb. Lazy loading or dynamic has no effect on size. Setup is Next 15 app inside a TurboRepo monorepo

[hsab]

@abuquack for the time being following #77 (comment) you can deploy using the --minify command. I'm on a paid plan fwiw

these are my build commands

[vicb]

#700 and #702 should have a significant effect on code size - should be released in the next few days
I'll close this issue for now.