angular: Slow incremental rebuild

šŸš€ Feature request

Option to turn off tree shaking (which is suppose to be slow).

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Description

I have quite big angular@11 project. App folder has 4MB within 2100 files. I know it is big. Initial compilation takes over 130 seconds. My command is node --max_old_space_size=10000 ./node_modules/@angular/cli/bin/ng serve so Iā€™m giving node extra memory.

Problem is with recompilation. Iā€™ve made an isolated lazy loaded module:

{
    path: 'dev',
    loadChildren: () => import('@dev/dev-pages/dev-pages.module').then(m => m.DevPagesModule)
  },

In that module I have only one, auto generated page component:

<p>page-dev-test works!</p>

If I add any string to template it takes almost 20 seconds to recompile (file is only 7kB) šŸ˜• Is it normal? Can I speed this up?

ng

Describe the solution youā€™d like

One of stackoverflowers (https://stackoverflow.com/a/65882673/979911) suggested that tree shaking is very have process which takes lot of time. How about turning it off in development?

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 1
  • Comments: 23 (13 by maintainers)

Most upvoted comments

It appears to be a bug in previous versions of ngx-build-plus. where it was enabled by default https://github.com/manfredsteyer/ngx-build-plus/blob/8e58880a279d329934a1c7e556b9cac6523ea284/lib/src/browser/schema.json#L246

License extraction is not intended to be used for incremental builds. Following the above, it appears that there is no action needed from the Angular team.

Thanks everyone for chiming in.

With the help of @alan-agius4 I got to a point where the rebuild is only ~3seconds; we needed to set "extractLicenses": false to disable license extraction. We are yet to figure out why that would have been enabled, as it should be disabled by default.

Thanks @sod, thatā€™s super helpful.

In fact itā€™s what I have done using the reproduction and thereā€™s a couple things to share here:

the ngc incremental build took 17s, most of which was type-checking. ngc doesnā€™t do incremental type-checking so each rebuild incurs the full cost. The Angular compiler was actually not adding much overhead here.

The CLI does have incremental type checking in rebuilds (since 11.1, coincidentally) and itā€™s a lot better in that case. Unfortunately, the CLI adds Webpack bundling, circular dependencies checks and bundle source-maps. Those steps add quite a bit of overhead.

Disabling source maps and the circular dependency check improves the times quite a bit. This can be done by extending the build configuration in angular.json using the following two flags:

            "showCircularDependencies": false,
            "sourceMap": false,

I canā€™t say whether itā€™s acceptable for these features to be disabled; for the circular dependencies plugin Iā€™d suggest to have it at least enabled for prod builds; or perhaps introduce a dedicated ā€œfastā€ configuration with those options configured.

Even with those flags, the rebuild is still ~10s. Most time (~80%) is spent in Webpack chunk plugins; that looks rather inefficient but I havenā€™t yet determined what could be done here.

@sod No I have all styles in dedicated theme files. Donā€™t use styles in components (sometimes but very simple).