Migrate to esbuild by mstange · Pull Request #5589 · firefox-devtools/profiler

mstange · 2025-09-03T22:39:43Z

codecov · 2026-01-20T01:48:30Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.56%. Comparing base (ca86724) to head (c0b82be).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5589      +/-   ##
==========================================
+ Coverage   85.55%   85.56%   +0.01%     
==========================================
  Files         320      319       -1     
  Lines       31415    31411       -4     
  Branches     8662     8670       +8     
==========================================
  Hits        26876    26876              
+ Misses       4108     4104       -4     
  Partials      431      431

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

canova · 2026-02-11T15:57:26Z

scripts/lib/build-utils.mjs

+  }
+}
+
+export function saveMetafile(buildResult, outputPath = 'dist/metafile.json') {


What is metafile exactly? I see that when we build, it puts the meta file to the metafile.json to the dist directory. Should we remove it at the end? Will it be exposed to web if it gets uploaded?

Ah, good question. It might make sense to have nested directories under dist/ for the various things.

E.g.:

dist/browser-build-prod/...

dist/meta/browser-build-prod.json

dist/browser-build-dev/...

dist/node/symbolicator-cli.js

Actually let's just keep the directory structure as-is.

You're right, the metafile was making it into the production output, which definitely was not what I intended. Let's stop emitting it by default; we don't need it, it's just there in case you want to do some bundle size profiling. And when we do emit it, we can put it outside of dist, for example into a new build-meta directory.

Ah yeah, I would prefer to keep the dist directory as is too. Sounds good to move this file out of dist.

canova · 2026-02-11T16:44:51Z

scripts/lib/esbuild-configs.mjs

+export const photonConfig = {
+  ...baseConfig,
+  format: 'esm',
+  platform: 'browser',
+  target: ['es2022'],
+  sourcemap: true,
+  publicPath: '/photon/',
+  entryPoints: ['res/photon/index.js'],
+  outdir: 'dist/photon',
+};


Currently yarn start-photon shows me 404 when I visit http://localhost:4243/photon/ . I think we don't copy the photon/index.html file. Could you fix that?

Oops, will do!

canova

Thanks for the PR!

I did some comparisons in the before and after of the dist/ directory after yarn build-prod and I can already see some nice improvements:

The total size of directory went from ~23M to ~22M.
Main bundle size went from ~1.6M and ~1.1M
I see total JS bundle size went from ~2.3M ~1.4M.

I think the main difference of the JS size difference is that webpack bundles the CSS with JS, and now CSS is moved to its own CSS file. I think it's a nice improvement.

Apart from that, I see that we stopped auto prefixing (and possibly minifying) the CSS though. See my comment below in postcss.config.js. What do you think?

canova · 2026-02-13T12:55:09Z

scripts/lib/esbuild-plugins.mjs

+
+// Plugin to mark chrome:// URLs as external in CSS
+//
+// This is a workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=2014811


Ah looks like it's resolved but not published yet. It would be nice to file an issue to clean this up later.

canova · 2026-02-13T12:56:08Z

scripts/lib/esbuild-plugins.mjs

+
+        for (const modulePath of Object.keys(inputs)) {
+          if (!modulePath.includes('node_modules')) {
+            findCycles(modulePath, []);


Shouldn't this be like this?:

Suggested change

findCycles(modulePath, []);

findCycles([], modulePath);

Whoops! Indeed!

canova · 2026-02-13T13:58:03Z

postcss.config.js

- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-module.exports = {
-  plugins: [require('cssnano'), require('autoprefixer')],


Hmm I don't see postcss anymore in the codebase, but we still have it in the package.json. Did we stop transforming the CSS now?

Edit: Checking the css, I think we stopped prefixing the css properties now with autoprefixer for webkit etc. For example, I don't see -webkit- equivalent of user-select: none;. I think this might create a real compat issue in Safari. What do you think? I see that there is esbuild-plugin-postcss if we want to have it still.

Oh indeed, without the webkit prefixed version, I can see text selection happening e.g. in the "tabs" when I right-click them. I'll add the postcss plugin.

Rather than using the postcss plugin, I chose https://www.npmjs.com/package/browserslist-to-esbuild and replaced target: 'es2022' with target: browserslistToEsbuild(); specifying browser versions rather than ECMAScript versions will cause esbuild to do the prefixing for us, see https://esbuild.github.io/content-types/#css .

canova

Looks good to me overall, thanks again for the work! I'll let you handle the landing after you look into the postcss stuff.

mstange force-pushed the esbuild branch 8 times, most recently from 0455be4 to 0ec7d84 Compare September 3, 2025 23:42

mstange force-pushed the esbuild branch from 0ec7d84 to 78d15a0 Compare November 6, 2025 19:43

mstange mentioned this pull request Nov 17, 2025

Use workbox-cli to generate the service worker #5681

Merged

mstange force-pushed the esbuild branch from 78d15a0 to 891e105 Compare January 20, 2026 01:46

mstange force-pushed the esbuild branch 4 times, most recently from 4ffc248 to 03f4d99 Compare January 20, 2026 16:41

mstange force-pushed the esbuild branch 6 times, most recently from 9e3eff2 to 31d83b2 Compare February 4, 2026 21:56

mstange marked this pull request as ready for review February 4, 2026 22:01

mstange requested a review from canova as a code owner February 4, 2026 22:01

mstange changed the title ~~WIP: Migrate to esbuild~~ Migrate to esbuild Feb 4, 2026

mstange marked this pull request as draft February 5, 2026 14:51

mstange removed the request for review from canova February 5, 2026 14:51

mstange force-pushed the esbuild branch 3 times, most recently from a9cf93b to bd3f05a Compare February 5, 2026 15:54

mstange force-pushed the esbuild branch 3 times, most recently from f7b5e5f to 3cee9ec Compare February 5, 2026 17:04

mstange marked this pull request as ready for review February 5, 2026 17:04

mstange requested a review from canova February 6, 2026 18:58

canova reviewed Feb 11, 2026

View reviewed changes

canova requested changes Feb 11, 2026

View reviewed changes

mstange force-pushed the esbuild branch from 3cee9ec to 4b0558f Compare February 12, 2026 00:34

canova reviewed Feb 13, 2026

View reviewed changes

canova approved these changes Feb 13, 2026

View reviewed changes

mstange force-pushed the esbuild branch from 4b0558f to 22979f8 Compare February 14, 2026 17:14

Use esbuild instead of webpack.

c0b82be

mstange force-pushed the esbuild branch from 22979f8 to c0b82be Compare February 14, 2026 17:15

mstange enabled auto-merge February 14, 2026 17:16

mstange merged commit 7304276 into firefox-devtools:main Feb 14, 2026
19 checks passed

Conversation

mstange commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

canova left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

canova left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mstange commented Sep 3, 2025 •

edited

Loading

codecov bot commented Jan 20, 2026 •

edited

Loading