Implement build caching support in esbuild-based browser application builder

[eneajaho]

Command

build, serve

Description

Implement build caching support in esbuild-based browser application builder

Describe the solution you'd like

Just like the webpack builder supports build caching, it would be nice to have it also in esbuild builder. As currently the webpack builder is faster on cold builds after the first run compared to esbuild one.

Describe alternatives you've considered

Use webpack builder.

[angular-robot[bot]]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[intellix]

had a go at replacing webpack with esbuild and noticed that rebuilds were slower, though I haven't seen anyone else complain about it yet so thought I was alone. I'm guessing this is the reason?

From swapping webpack to esbuild, these are the timings I've experienced:

• starts: 40s -> 20s
• builds: 80s -> 20s
• rebuilds: 2s -> 4s (the confusing one)

I personally feel like rebuilds are more important because you rebuild more than you start/build and building is async within a pipeline anyway.

[vbraun]

@intellix I'm also getting slightly slower incremental rebuilds, you are not the only one. Though build caching (this ticket) should only affect cold starts.

[bjornharvold]

When using the new esbuild feature from Angular 17.0.3 and TailwindCss, it takes us 500+ seconds to start up a large application. When we make a simple code change, it takes 280+ seconds for esbuild to rebuild.

The esbuild build story is GREAT. Working with esbuild and TailwindCSS on a daily basis is a completely different story.

Wondering what's possible here. The current situation is not tenable.

FYI Before we used Nx's incremental webpack build and that worked in an "acceptable" way. If the change was in the "top most" part of the application, a rebuild was snappy. If the change was made in the "lower part" of the app, the dev server would have to work its way up to the top by compiling everything in between.

You definitely see a delay when having to pre-process the CSS in a larger application in comparison to an Angular app that runs with SCSS / Bootstrap for example.

Thoughts from the Team Angular highly requested 🍺

[vbraun]

We generate a static tailwind scss, that works fine (but unnused classes are then not pruned). I suggest you open a separate ticket as its specific to the built-in Angular tailwindcss support.

[kklocker]

Having the same issue here: After upgrading to angular 17 we want to try out the new application builder, but increasing the build times (compared to cached webpack builds) is a tough one to swallow

[JeanRemiDelteil]

Is the @angular-devkit/build-angular:application builder using cache at all ?

On our application we have no differences between the first build with no cache, and the following cold build with cache.

Here are some approximate numbers collected from multiple executions from a dev machine:

Builder	Cold build, no cache	Cold build, with cache	Hot rebuild (small change in a leaf component)	Hot rebuild (small change in a root scss)
Webpack	202s	60s	17s	94s
esBuild	111s	109s	7s	95s

In our case though there are multiple goals:

• CI runs: Cold build, with cache
• Local UI dev: All of the above conditions
• Back-end devs: Cold build, with cache

Basically there are no real improvement to use the esBuild builder. We even have costlier CI cycles (and CI cycle typically takes longer than the above metrics, as the machines are less powerful).

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}