Skip to content

esbuild: new experimental option for web builds

Warren Gifford requested to merge sqs/esbuild-dev into main

Created by: sqs

esbuild is an alternative to Webpack for building client/web (the web app). Its usage on our codebase is EXPERIMENTAL and optional.

To use esbuild instead of Webpack, set the env var DEV_WEB_BUILDER=esbuild:

DEV_WEB_BUILDER=esbuild enterprise/dev/start.sh

Comparison vs. Webpack:

  • esbuild: faster initial build (esbuild ~3s vs. Webpack ~53s)
  • esbuild: faster recompilation (esbuild ~900ms vs. Webpack ~5000ms)
  • esbuild: smaller total asset size in dev (Chrome devtools network resources size for /search: esbuild ~24.1MB vs. Webpack ~64.1MB)
  • esbuild: faster DOMContentLoaded (on /search: esbuild ~1.2s vs. Webpack ~2.3s)
  • Webpack: fast refresh (not supported/implemented yet in esbuild, so you need to manually reload the page after each change)

Notes:

  • It's probably possible to configure Webpack to be faster and produce smaller dev bundles, so consider these comparisons as reflecting the current state, not the hypothetical ideal state after more optimization.
  • Webpack is still used for all other web builds (including storybooks and the browser extension).
  • esbuild is not configured to make a production build. Just use it for local dev for now.

Questions or problems with esbuild? Ask in #frontend-platform and mention @sqs (who is responsible for this esbuild experiment).

Merge request reports