From 312a8dc25e461519d7b80d41031d1bacac542be2 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 5 Jul 2023 13:26:46 -0400
Subject: [PATCH] feat(dev): output esbuild metafiles for bundle analysis

---
 .changeset/red-bananas-design.md               | 12 ++++++++++++
 packages/remix-dev/compiler/analysis.ts        | 17 +++++++++++++++++
 packages/remix-dev/compiler/css/compiler.ts    |  5 ++++-
 packages/remix-dev/compiler/js/compiler.ts     |  2 ++
 packages/remix-dev/compiler/server/compiler.ts |  5 ++++-
 5 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/red-bananas-design.md
 create mode 100644 packages/remix-dev/compiler/analysis.ts

diff --git a/.changeset/red-bananas-design.md b/.changeset/red-bananas-design.md
new file mode 100644
index 00000000000..d3fd6592b8a
--- /dev/null
+++ b/.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.
diff --git a/packages/remix-dev/compiler/analysis.ts b/packages/remix-dev/compiler/analysis.ts
new file mode 100644
index 00000000000..73381afbb71
--- /dev/null
+++ b/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));
+};
diff --git a/packages/remix-dev/compiler/css/compiler.ts b/packages/remix-dev/compiler/css/compiler.ts
index cc56b0dc7fb..16f184c9aea 100644
--- a/packages/remix-dev/compiler/css/compiler.ts
+++ b/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")
     );
diff --git a/packages/remix-dev/compiler/js/compiler.ts b/packages/remix-dev/compiler/js/compiler.ts
index 407b5af4502..5cac49348c0 100644
--- a/packages/remix-dev/compiler/js/compiler.ts
+++ b/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) {
diff --git a/packages/remix-dev/compiler/server/compiler.ts b/packages/remix-dev/compiler/server/compiler.ts
index c1b995abeea..fd99c4c4ac0 100644
--- a/packages/remix-dev/compiler/server/compiler.ts
+++ b/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 {