zjffun blog

Deploy Next.js on Cloudflare Meet 3M Limit

更新于 写于 nextjscloudflare

A Solution

Change wrangler deploy to wrangler deploy --minify.

With the --minify got my worker just under 3mb.

Build Step

  • next build
  • opennextjs-cloudflare build
  • wrangler deploy

next

Trough analyse the size of next bundle is about 1M. It's less than 3M.

Optimizing: Package Bundling | Next.js

Install:

bash
npm i @next/bundle-analyzer

Update next.config.js:

js
/** @type {import('next').NextConfig} */
const nextConfig = {};

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer(nextConfig);

Run:

bash
ANALYZE=true npm run build

opennextjs-cloudflare

I can only find a doc in opennext AWS:

Bundle Size - OpenNext

Run:

bash
du -hs .open-next/server-function/node_modules/* | sort -rh
# or
du -hs .open-next/server-functions/default/node_modules/* | sort -rh

But I got this result. It is no help.

bash
du -hs .open-next/server-functions/default/node_modules/* | sort -rh
#  27M    .open-next/server-functions/default/node_modules/next
# 1.7M    .open-next/server-functions/default/node_modules/react-dom
# 464K    .open-next/server-functions/default/node_modules/acorn

Then I read this issue, he provide a solution. Cloudflare deploy not working (Bundle > 1MiB) · Issue #77 · opennextjs/opennextjs-cloudflare

wrangler deploy --minify with the --minify got my worker just under 3mb.

wrangler

Bundling · Cloudflare Workers docs

Run:

npx wrangler deploy --dry-run --outdir dist

We will get a js file and a map file. Maybe we can analyse through the map file.