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

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

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

"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"
+           }
          }
        }

完整代码如下:

{
  "$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"
}
  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值