feat(dev): output esbuild metafiles for bundle analysis (#6772)

.changeset/red-bananas-design.md

@@ -0,0 +1,12 @@
+---
+"@remix-run/dev": minor
+---
+
+Output esbuild metafiles for bundle analysis
+
+Written to server build directory (`build/` by default):
+- `metafile.css.json`
+- `metafile.js.json` (browser JS)
+- `metafile.server.json` (server JS)
+
+Metafiles can be uploaded to https://esbuild.github.io/analyze/ for analysis.

packages/remix-dev/compiler/analysis.ts

@@ -0,0 +1,17 @@
+import fs from "node:fs";
+import path from "node:path";
+import type { Metafile } from "esbuild";
+
+import type { Context } from "./context";
+
+export let writeMetafile = (
+  ctx: Context,
+  filename: string,
+  metafile: Metafile
+) => {
+  let buildDir = path.dirname(ctx.config.serverBuildPath);
+  if (!fs.existsSync(buildDir)) {
+    fs.mkdirSync(buildDir, { recursive: true });
+  }
+  fs.writeFileSync(path.join(buildDir, filename), JSON.stringify(metafile));
+};

packages/remix-dev/compiler/css/compiler.ts

@@ -18,6 +18,7 @@ import {
 } from "./plugins/bundleEntry";
 import type { Context } from "../context";
 import { isBundle } from "./bundle";
+import { writeMetafile } from "../analysis";
 
 const getExternals = (config: RemixConfig): string[] => {
   // For the browser build, exclude node built-ins that don't have a
@@ -96,9 +97,11 @@ export let create = async (ctx: Context) => {
   let compiler = await esbuild.context({
     ...createEsbuildConfig(ctx),
     write: false,
+    metafile: true,
   });
   let compile = async () => {
-    let { outputFiles } = await compiler.rebuild();
+    let { outputFiles, metafile } = await compiler.rebuild();
+    writeMetafile(ctx, "metafile.css.json", metafile);
     let bundleOutputFile = outputFiles.find((outputFile) =>
       isBundle(ctx, outputFile, ".css")
     );

packages/remix-dev/compiler/js/compiler.ts

@@ -22,6 +22,7 @@ import invariant from "../../invariant";
 import { hmrPlugin } from "./plugins/hmr";
 import type { LazyValue } from "../lazyValue";
 import type { Context } from "../context";
+import { writeMetafile } from "../analysis";
 
 type Compiler = {
   // produce ./public/build/
@@ -164,6 +165,7 @@ export const create = async (
 
   let compile = async () => {
     let { metafile } = await compiler.rebuild();
+    writeMetafile(ctx, "metafile.js.json", metafile);
 
     let hmr: Manifest["hmr"] | undefined = undefined;
     if (ctx.options.mode === "development" && ctx.config.future.v2_dev) {

packages/remix-dev/compiler/server/compiler.ts

@@ -20,6 +20,7 @@ import type * as Channel from "../../channel";
 import type { Context } from "../context";
 import type { LazyValue } from "../lazyValue";
 import { cssBundlePlugin } from "../plugins/cssBundlePlugin";
+import { writeMetafile } from "../analysis";
 
 type Compiler = {
   // produce ./build/index.js
@@ -132,9 +133,11 @@ export const create = async (
   let compiler = await esbuild.context({
     ...createEsbuildConfig(ctx, refs),
     write: false,
+    metafile: true,
   });
   let compile = async () => {
-    let { outputFiles } = await compiler.rebuild();
+    let { outputFiles, metafile } = await compiler.rebuild();
+    writeMetafile(ctx, "metafile.server.json", metafile);
     return outputFiles;
   };
   return {