fix: do not bundle og when not used (#1076)

Author: vicb

.changeset/chilly-files-notice.md

@@ -0,0 +1,7 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+fix: do not bundle og when not used
+
+This saves ~500kB when og is not used

packages/cloudflare/src/cli/build/bundle-server.ts

@@ -59,7 +59,7 @@ export async function bundleServer(buildOpts: BuildOptions, projectOpts: Project
 	console.log(`\x1b[35m⚙️ Bundling the OpenNext server...\n\x1b[0m`);
 
 	await patchWebpackRuntime(buildOpts);
-	patchVercelOgLibrary(buildOpts);
+	const useOg = patchVercelOgLibrary(buildOpts);
 
 	const outputPath = path.join(outputDir, "server-functions", "default");
 	const packagePath = getPackagePath(buildOpts);
@@ -108,7 +108,11 @@ export async function bundleServer(buildOpts: BuildOptions, projectOpts: Project
 			// Apply updater updates, must be the last plugin
 			updater.plugin,
 		] as Plugin[],
-		external: ["./middleware/handler.mjs"],
+		external: [
+			"./middleware/handler.mjs",
+			// Do not bundle og when it is not used
+			...(useOg ? [] : ["next/dist/compiled/@vercel/og/index.edge.js"]),
+		],
 		alias: {
 			// Workers have `fetch` so the `node-fetch` polyfill is not needed
 			"next/dist/compiled/node-fetch": path.join(buildOpts.outputDir, "cloudflare-templates/shims/fetch.js"),

packages/cloudflare/src/cli/build/patches/ast/patch-vercel-og-library.ts

@@ -14,23 +14,28 @@ type TraceInfo = { version: number; files: string[] };
  * Patches the usage of @vercel/og to be compatible with Cloudflare Workers.
  *
  * @param buildOpts Build options.
+ * @returns Whether the @vercel/og library is used.
  */
-export function patchVercelOgLibrary(buildOpts: BuildOptions) {
+export function patchVercelOgLibrary(buildOpts: BuildOptions): boolean {
 	const { appBuildOutputPath, outputDir } = buildOpts;
 
 	const functionsPath = path.join(outputDir, "server-functions/default");
 	const packagePath = path.join(functionsPath, getPackagePath(buildOpts));
 
+	let useOg = false;
+
 	for (const traceInfoPath of globSync(path.join(appBuildOutputPath, ".next/server/**/*.nft.json"), {
 		windowsPathsNoEscape: true,
 	})) {
-		let edgeFilePatched = false;
-
+		// Look for the Node version of the traced @vercel/og files
 		const traceInfo: TraceInfo = JSON.parse(readFileSync(traceInfoPath, { encoding: "utf8" }));
 		const tracedNodePath = traceInfo.files.find((p) => p.endsWith("@vercel/og/index.node.js"));
-
 		if (!tracedNodePath) continue;
 
+		// If we are here, it means the application is using the @vercel/og library
+		// and there is an `index.edge.js` colocated file that we need to copy and patch.
+		useOg = true;
+
 		const outputDir = getOutputDir({ functionsPath, packagePath });
 		const outputEdgePath = path.join(outputDir, "index.edge.js");
 
@@ -44,12 +49,11 @@ export function patchVercelOgLibrary(buildOpts: BuildOptions) {
 			copyFileSync(tracedEdgePath, outputEdgePath);
 		}
 
-		if (!edgeFilePatched) {
-			edgeFilePatched = true;
-			// Change font fetches in the library to use imports.
-			const node = parseFile(outputEdgePath);
-			const { edits, matches } = patchVercelOgFallbackFont(node);
-			writeFileSync(outputEdgePath, node.commitEdits(edits));
+		// Change font fetches in the library to use imports.
+		{
+			const ast = parseFile(outputEdgePath);
+			const { edits, matches } = patchVercelOgFallbackFont(ast);
+			writeFileSync(outputEdgePath, ast.commitEdits(edits));
 
 			if (matches.length > 0) {
 				const fontFileName = matches[0]!.getMatch("PATH")!.text();
@@ -59,12 +63,16 @@ export function patchVercelOgLibrary(buildOpts: BuildOptions) {
 
 		// Change node imports for the library to edge imports.
 		// This is only useful when turbopack is not used to bundle the function.
-		const routeFilePath = traceInfoPath.replace(appBuildOutputPath, packagePath).replace(".nft.json", "");
+		{
+			const routeFilePath = traceInfoPath.replace(appBuildOutputPath, packagePath).replace(".nft.json", "");
 
-		const node = parseFile(routeFilePath);
-		const { edits } = patchVercelOgImport(node);
-		writeFileSync(routeFilePath, node.commitEdits(edits));
+			const ast = parseFile(routeFilePath);
+			const { edits } = patchVercelOgImport(ast);
+			writeFileSync(routeFilePath, ast.commitEdits(edits));
+		}
 	}
+
+	return useOg;
 }
 
 function getOutputDir(opts: { functionsPath: string; packagePath: string }) {

packages/cloudflare/src/cli/build/patches/ast/vercel-og.ts

@@ -54,6 +54,9 @@ fix: |-
 /**
  * Patches the default font fetching to use a .bin import.
  *
+ * We use `.bin` extension as they are added as modules in the wrangler bundler.
+ * We would need to add a rule to handle `.ttf` otherwise.
+ *
  * @param root Root node.
  * @returns Results of applying the rule.
  */