Angular升级后运行编译变慢？如何解决？

公司的Angular项目升级后，使用体验感十分不好，运行、编译的时间明显增长，工作效率是十分低下，但奈何公司的大佬们都有自己的事情要忙，结识的大佬也不够多，只能靠自己找度娘了。但是，哎，你还别说，真让我找到了！！！

感谢下面这位大大的分享：解决在升级到Angular v13之后，ng serve启动变慢（slow）的问题_angular12编译慢-CSDN博客

上面这位大大的分享中呢有一篇来自外国程序员的解释（https://dev.to/brandontroberts/speeding-up-the-development-serve-after-upgrading-to-angular-v12-5db5），大家有条件可以自行查看，不过个人觉得上面大大的文章已经十分详细了，完全足够！亲试有效！！！

主要解决办法截图如下：再次感谢大大的分享！

总结解决办法：添加development构建配置，也就是我们需要手动将开发选项添加为默认值 ，并将serve中target的defaultConfiguration设置为development。

注意按照上面截图改了之后初始运行整个项目的时间几乎没有太大改变，但是编译时间是有明显改善的！！！

要想初始运行整个项目的时间也减少，需要进行下面的配置：

javascript 复制代码

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
+          "defaultConfiguration": "",
          "options": {
+            "browserTarget": "ngv12:build:development"
          },
          "configurations": {
            "production": {
              "browserTarget": "ngv12:build:production"
            },
+           "development": {
+            "browserTarget": "ngv12:build:development"
+           }
          }
        }

完整代码如下：

javascript 复制代码

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ngv12": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ngv12",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
+            "development": {
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "buildOptimizer": false,
+              "sourceMap": true,
+              "optimization": false,
+              "namedChunks": true
+            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          },
+          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
+          "defaultConfiguration": "",
          "options": {
+            "browserTarget": "ngv12:build:development"
          },
          "configurations": {
            "production": {
              "browserTarget": "ngv12:build:production"
            },
+           "development": {
+            "browserTarget": "ngv12:build:development"
+           }
          }
        }
      }
    }
  },
  "defaultProject": "ngv12"
}