Angular Application Builder: Transitioning from Webpack to Esbuild

cover

Introduction

We are going to compare here classical Webpack bundling, employed by Angular applications, with new Esbuild system. We are going to migrate step by step to new system.

What is the Webpack Build System?

It's a capable module bundler popular among web developers. It reduces a huge number of file formats, whether JavaScript, CSS, or even HTML, to a solitary output file. Angular long employed Webpack as its primary build system.

Why did Angular migrate away from Webpack? The reason are:

  • Slow build times.
  • Complex configuration.
  • Increased build times as node_modules dependencies grow.

What is Esbuild?

Esbuild is a next-gen bundler that was specifically developed to bundle and compile JavaScript and TypeScript with incredible speed. It's developed with the programming language Go, and since it enjoys multi-core parallel processing, its speed is amplified tremendously.

Benchmark Tests: Esbuild vs Other Bundlers

JavaScript Benchmark

In this benchmark, we bundle the three.js library ten times without any cache to create a fresh bundle.

Bundler Time Relative slowdown Absolute speed Output size
esbuild 0.39s 1x 1403.7 kloc/s 5.80mb
parcel 2 14.91s 38x 36.7 kloc/s 5.78mb
rollup 4 + terser 34.10s 87x 16.1 kloc/s 5.82mb
webpack 5 41.21s 106x 13.3 kloc/s 5.84mb

TypeScript Benchmark

This benchmark uses the Rome codebase to simulate bundling a large TypeScript project.

Bundler Time Relative slowdown Absolute speed Output size
esbuild 0.10s 1x 1318.4 kloc/s 0.97mb
parcel 2 6.91s 69x 16.1 kloc/s 0.96mb
webpack 5 16.69s 167x 8.3 kloc/s 1.27mb

Application Builder in Angular

Since Angular 17 and later, Angular's build system was rewritten to a large extent. The new build system uses the application builder, with options to help faster, quicker builds. The new builder:

  • Offers simplified configuration files.
  • Significantly reduces build times thanks to Esbuild.
  • Integrates modern development needs such as SSR, prerendering, and HMR.
  • Is enabled by default in new projects.

Migrating to the New Build System in Angular

Angular 17 and up comes with a new build system. You can migrate below versions of Angular with an automated tool. There's an automated schematics script from the Angular team to achieve that scenario.

The automatic migration will remove Webpack-specific code and modify angular.json along with other relevant files.

ng update @angular/cli --name use-application-builder

Steps performed by migration:

  • Builder conversion: Modifies existing old browser or application targets to new application builder.
  • SSR Builders Removal: Deletes all existing SSR builders since the new application builder already includes SSR support.
  • Configuration Updates: Update config files (angular.json) to be compatible with new system.
  • Configuration Merge for TypeScript: Merges tsconfig.server.json and tsconfig.app.json with option to add option to add `"
  • Updates to Server Code: Update server-side code (Node.js/Express) to correspond to new bootstrapping and directory structure.
  • Strip Webpack-Specific Styles: Removes Webpack-specific syntax (^, ~) from style imports and reorganizes stylesheets.
  • Dependency Optimisation: If -angular-devkit/build-angular or -angular-devkit/angular-common are not being used elsewhere, then it's substituted by a smaller and optim

Manual Migration

For existing Angular projects, manual migration to the new build system is available with two stable and supported options.

🔹 1. browser-esbuild Builder (Compatible Migration)

  • Generates only the client-side bundle.
  • Designed for compatibility with the old browser builder.
  • Minimal breaking changes.

Example angular.json Modification:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser"

⬇️ Change to:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser-esbuild"

🔹 2. application Builder (Full Migration)

  • Provides client-side and optional server-side rendering (SSR) support.
  • Includes advanced features like build-time prerendering.
  • Default builder for new Angular CLI projects.
  • Recommended for future SSR implementations.

Example angular.json Modification:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser"

⬇️ Change to:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application"

Additional Required Updates:

Old Setting New Setting / Explanation
main Rename to browser.
polyfills Should be an array, not a single file.
buildOptimizer Remove (handled by optimization).
resourcesOutputPath Remove (default is now media).
vendorChunk Remove (no longer needed).
commonChunk Remove (no longer needed).
deployUrl Remove (use <base href> instead).
ngswConfigPath Rename to serviceWorker.

For SSR-Enabled Applications

  • The original SSR builders were distinct (prerender, server, server-dev, app-shell) and are consolidated into one application
  • ng update deletes old configurations and sets up a new @angular/ssr package.
  • Server and code configurations are automatically adapted to a new system.
  • It works with both application and browser-esbuild builders.

Conclusion

The new build system upgrade to Angular signifies an upgrade, bringing existing web development needs up to date by trading slow and cumbersome Webpack's infrastructure with succinctness and speed from Esbuild.