解决在升级到Angular v13之后，ng serve启动变慢（slow）的问题

原创

已于 2022-02-04 20:43:38 修改 · 2.4k 阅读

标签

#javascript #前端 #Angular #upgrade

于 2022-02-04 20:24:52 首次发布

升级Angular项目至v13后，ngserve编译速度显著下降，启动需90s+，重构时间延长。问题在于Angular 12默认开启生产模式导致。解决办法是手动添加'development'构建配置，调整serve的defaultConfiguration为'development'，以减少编译时间和提高开发效率。修改后，启动和重构时间大幅缩短。

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

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

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

原因：

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

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

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

要手动修复这个问题，您需要将开发选项添加为默认值，并将serve中target的defaultConfiguration设置为development。
edit
示例：

{
   
   
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
   
   
    "ngv12": {
   
   
      "projectType": "application",
      "schematics": {
   
   },
      "root": "",
      "sourceRoot"