What is the difference between the "browser-esbuild" and "application" builders?

Question

Docs description

I saw this in the documentation but I was confused. Could anyone explain it to me better?

At first I thought that "application" was for SSR but I don't know the real difference between them.

Answer 1

Excellent question !

The browser-esbuild builder was introduced in v16 as developer preview. It was the first esbuild based builder. It was quite experimental at the time.

With v17 released we now have 2 esbuild based builders :

• The application builder. This is now the default builder for Angular when you create a new project with the CLI. This builder is the result of all the feedback the Angular team gathered during the span of v16. This builder is based on esbuild and introduces some new settings/apis : It is an all-in-one builder that supports CSR (Client Side Rendering), SSR (Service side rendering) and pre-rendering from improved SEO.
• In v17, the browser-esbuild builder is a compatibility layer for the application builder. It shares the same settings with the old webpack-based browser builder. This builder exist to smooth the transition to esbuild. It enables developers to switch back and forth between the browser-esbuild and the browser builders without changing any settings. This builder has the downside of only supporting CSR.

In both cases you'll be using an esbuild-based builder. But keep in mind that the latter (browser-esbuild) will be deprecated once the transition period ends.

More on this in this article.

Answer 2

I use both but seems that the browser-esbuild is a little bit faster and this is a bit strange