Incremental AOT compilation is 5 times slower in Angular 11.1 comparing to 10.1 #40635
Description
🐞 bug report
Is this a regression?
Yes, it was better in Angular 10.1.
Description
After upgrading the app to 11.1 I observed regression in build time - both initial and incremental. While intial build time increased by 10% (150s to 165s), further incremental compilations in watch mode looks times slower.
There are two different cases I wanted to describe:
- Making an edit in a page-level component - it has a number of dependencies on its own, but relatively few other modules depend on it; it's imported directly by the routing module.
- Making an edit into a low-level shared module that is used by virtually every component in the app.
Here is the timing breakdown:
| Angular 10.1 | Angular 11.1 | |
|---|---|---|
| initial | 150s | 165s |
| incremental - page-level edit | 3s | 8s |
| incremental - shared low-level edit | 9s | 40s ❗️ |
CPU profile (via node --inspect) shows something very strange for Angular 11: a better half of the time it spends in analyzingFileEmitter
🌍 Your Environment
Angular Version:
Angular CLI: 11.1.2
Node: 12.14.1
OS: darwin x64
Angular: 11.1.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1101.2
@angular-devkit/build-angular 0.1101.2
@angular-devkit/core 11.1.2
@angular-devkit/schematics 11.1.2
@angular/cli 11.1.2
@nguniversal/builders 11.1.1
@nguniversal/express-engine 11.1.1
@schematics/angular 11.1.2
@schematics/update 0.1101.2
rxjs 6.6.3
typescript 4.1.3
Anything else relevant?
- I tried disabling source maps. While it does speed up compilation, it's still 24s (down from 40s with source maps) for the slow incremental case - way too long.
- Also
"showCircularDependencies": false
Complete `build` section from `angular.json`
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"preserveSymlinks": true,
"assets": [
"src/assets",
"src/views"
],
"aot": true,
"progress": false,
"styles": [
"src/app/app.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules"
]
},
"scripts": [
{
"input": "node_modules/browser-update/update.npm.full.js",
"inject": false,
"bundleName": "browser-update-3.0"
},
{
"input": "src/browser-update-config.js",
"inject": false,
"bundleName": "browser-update-3.0"
}
],
"namedChunks": true,
"showCircularDependencies": false,
"allowedCommonJsDependencies": [
"lodash",
"numeral",
"@splitsoftware/splitio",
"fuzzysort",
"hellojs",
"stale-lru-cache",
"card-validator",
"graphql-tag",
"getstream",
"@babel/runtime-corejs3",
"core-js-pure",
"axios",
"zen-observable",
"utfx",
"jwt-decode"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": {
"scripts": true,
"styles": false,
"hidden": true,
"vendor": false
},
"extractCss": true,
"namedChunks": true,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true,
"statsJson": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
},
{
"replace": "src/environments/development-modules.ts",
"with": "src/environments/development-modules.prod.ts"
},
{
"replace": "src/environments/development-keys.ts",
"with": "src/environments/development-keys.prod.ts"
},
{
"replace": "src/main.ts",
"with": "src/main.prod.ts"
}
]
},
"es5": {
"tsConfig": "src/tsconfig.es5.json"
}
}
},