解决在升级到Angular v13之后,ng serve启动变慢(slow)的问题

最近在升级公司的Angular项目,项目使用Angular-Cli搭建,UI使用Angular Metarial库和懒加载路由,Angular版本由v10升级到v13。
升级指导:https://update.angular.io/

问题:升级之后ng serve编译非常慢

仅仅启动都要用到90s+解决在升级到Angular v13之后,ng serve启动变慢(slow)的问题
开发过程中的重构时间也变长了,任何一个小的改动,哪怕仅仅是文字或者样式的改动都要重新编译,并且耗时10s+到40s不等
解决在升级到Angular v13之后,ng serve启动变慢(slow)的问题
一顿操作猛如虎,一看战绩零杠五,这样肯定不行嘚,会大大降低开发的效率。谷歌一下才发现,确实有很多“升级到Angular12之后,ng serve 编译缓慢”之类的问题,大概能确认不是我单独项目的问题,嗯,下面就是寻找解决办法啦。

原因:

Angular 12版本中,运行ng build,现在默认为生产模式。这是一个受欢迎的变化,因为这样可以减少不小心将一个开发构建部署到生产环境中的机会,后者要慢得多,规模也大得多,会让人觉得Angular很慢。这也与其他为生产而构建的web框架一致。

Angular服务于应用的方式,本质上是用监视模式进行构建。正如前面提到的,在默认情况下,在启用生产优化的情况下进行构建。这会增加构建过程的时间。

解决办法
有一个迁移来添加“development”构建配置。

要手动修复这个问题,您需要将开发选项添加为默认值,并将serve中target的defaultConfiguration设置为development
解决在升级到Angular v13之后,ng serve启动变慢(slow)的问题
示例:

{
  "$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"
            }
          }
        }
      }
    }
  },
  "defaultProject": "ngv12"
}

效果:

再次运行可见速度快了很多,启动项目60s,重构时间也均未超过10s
解决在升级到Angular v13之后,ng serve启动变慢(slow)的问题

参考资料

Speeding up the development serve after upgrading to Angular v12

上一篇:一键部署Home Assistant ubuntu 20.4.3 树莓派3b+脚本


下一篇:spring boot——使用异步请求,提高系统的吞吐量