Poor Angular-CLI 'compile on save' performance

Question

At the moment, after saving a .ts file, I'm seeing

"Generating browser application bundles..." for 30+ seconds before the browser refreshes. This is painful. Here is what I can tell you so far:

• I have been diligently breaking the app up into multiple lazily loaded modules, but this has no effect on the above issue. I'm not sure if that only improves load time perf.

• My angular.json configuration includes the following:

    "buildOptimizer": false,
    "optimization": false,
    "vendorChunk": true,
    "extractLicenses": false,
    "sourceMap": true,
    "namedChunks": true,
    "aot": false,
    "outputHashing": "none"

• I am using Angular CLI version 18.

• I have already tried the --verbose flag but it provides little useful information. Specifically it logs nothing new.

• Interestingly, a fresh prod build is pretty fast (maybe 40 seconds which is great for such a large project) but often compile on save is even slower! So I sometimes just resort to re-serving the app.

• I'm noticing quite a high variability in compilation times depending on which file I'm saving. This suggests that there may be some labor intensive dependency resolution being done by webpack (or maybe even typescript).

---

So my questions are:

• Is there absolutely no way that I can get more verbose logging from Webpack?
• Are there some other techniques I can use debug/isolate performance bottlenecks?

Answer 1

New Builder

You have mentioned you need webpack, if you are open to it, you can migrate the new builder - using esBuild and Vite.

Migrating to the new build system

---

Using webpack and hmr:

How about enable hmr maybe that might help.

Angular 18 Cli Docs - ng serve

hmr

Enable hot module replacement.
Value Type - boolean
Default - false

You might experience minor issue during development, but a screen refresh will show the proper result, if you notice any issues.