Angular 12 'ng serve' 构建应用程序的速度很慢，就像生产构建一样答案

【问题标题】：Angular 12 'ng serve' builds apps slowly, almost like production buildsAngular 12 'ng serve' 构建应用程序的速度很慢，就像生产构建一样
【发布时间】：2021-08-08 09:27:51
【问题描述】：

我刚刚将一个应用程序从 Angular 11.2.7 迁移到 Angular 12。一切都运行良好，除了当我开发和使用“ng serve”时，重建时间现在要慢得多，快到了令人沮丧。

我在 M1 iMac 上，使用节点 16.1.0，物有所值。

在我迁移到 Angular 12 之前，这台机器的开发重建速度非常快（亚秒级）。现在，如果我只更改一行代码，即使我只更改控制台日志中的一个字母，构建时间也是 23 秒，其中大约 22 秒被“阶段：密封”占用。

我还注意到，即使在 ng 服务时，所有内容现在都从缩小的“main.js”运行。我似乎记得版本 11 没有这样做，但在开发期间运行了单个未缩小的组件。这是为了比如说，ng serve 现在似乎在做类似完整的生产构建每次我改变任何东西。我认为这是缓慢的根本原因，但我不确定。

所以。 . .

我还应该在 Angular 12 中使用“ng serve”进行开发吗？

迁移时是否需要设置一个选项，例如关闭完全缩小的重建，以保持旧的构建速度？

这个“密封阶段”到底是什么？对我来说，这听起来像是一个生产构建术语！

谢谢

约翰

【问题讨论】：

我在更新到 Angular 12 后也遇到了同样的问题，但我使用的是 TailwindCSS，尽管这与它有某种关联（postcss、purge 等）。
不知道是不是改成了@angular-devkit/build-angular:dev-server ...
有一个open issue already

标签： angular angular-material

【解决方案1】：

angular cli 更新为 v12，使开发环境更像生产环境。

或者他们喜欢这样称呼它：

这些更改的目的是降低配置复杂性并支持新的“默认生产构建”计划。

根据他们的变化判断，您应该更新您的angular.json 并更新projects.{PROJECT_NAME}.architect.build.defaultConfiguration 路径：

"defaultConfiguration": "development"

阅读更多here

如果您没有使用ng update 命令，而是使用npm 手动更新，则需要运行迁移。具体来说，材料样式有一些变化，如果不迁移，可能会导致构建时间过长。要触发这些迁移，请运行：

ng update @angular/cli --migrate-only --from 11 --to 12

【讨论】：

我以您的回答为出发点并这样做了：创建了一个全新的 Angular 12 应用程序，将迁移的应用程序中的 angular.json 与新应用程序中的 angular.json 进行了比较（有很多差异，这里就不多说了！）并使迁移的应用程序与新应用程序保持一致。现在又超快了。谢谢！
Visual Studio Code 中的“比较选定文件”功能非常棒，可以对两个文件进行实时、可编辑的差异化，以使它们对齐，顺便说一句。
@John 你试过我给出的迁移命令了吗？它也应该做到这一点：D
我试过了，但它给了我一个错误并且没有更改任何配置文件。我有点担心可能需要迁移其他文件，例如 angular.json。 Angular Material 更新更改了一些 CSS，但升级中没有其他任何更改。
@PoulKruijt 谢谢，它对我有用！请注意，我还需要设置：(...).build.defaultConfiguration 到 "development"。否则它就是隐含的生产。 Angular 自动迁移并没有为我做这件事，因为我使用了自定义构建器 @angular-builders/custom-webpack:dev-server。查看迁移的源代码：github.com/angular/angular-cli/blob/master/packages/schematics/…

【解决方案2】：

如果您从干净的 angular.json 手动复制点点滴滴（您绝对应该这样做），请确保不要错过 serve 下的 "defaultConfiguration": "development"。

我以前的 angular.json 没有这个，坦率地说这可能是我的错误 - 或者它可能是事后出现的一个特性。我仍然获得了一个生产版本，这非常令人沮丧，因为它需要 3 分钟，而且没有任何东西告诉你它在做什么。

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

在以下情况下，您将知道您有一个开发版本：

在浏览器 devtools 中查看源代码会显示您的代码和 cmets 并非全部在一行中。
惰性块文件具有长文件名，例如 default-src_app_common-crm_common-crm_module_ts.js 而不是 34.js

另外，我个人选择关闭sourceMap。它使我的编译速度更快，如果我真的需要它，我总是可以启用它。

非常重要：

如果您多次运行迁移，迁移似乎会出现“类似错误的行为”。如果aot 设置当前为真，那么迁移将删除它（因为默认为真，所以它是多余的）。但是，如果您再次运行它（缺少 aot 设置），那么它将被写为 false 并有效地禁用（因为它认为您正在从 11 迁移，其中它的缺失意味着错误并且它认为您希望它保持错误） .

 ng update @angular/cli --migrate-only --from 11 --to 12

所以运行迁移实际上可以给人一种加快构建速度的假象，但实际上它实际上只是禁用了 aot。

换句话说，如果您已经运行过ng update，请不要运行它，并仔细查看您的angular.json 文件。

【讨论】：

话虽如此，我仍然看到构建时间几乎是以前的 3 倍。它可能只是 webpack 5，但如果是这种情况，他们迫切需要找到一种解决方法，因为这对我不起作用。
github.com/angular/angular-cli/issues/20979

【解决方案3】：

我必须将以下内容添加到我的配置中。我的新应用似乎没有任何“开发”配置。

在angular.json

"configurations": {
  "development": {
    "optimization": false,
    "outputHashing": "all",
    "sourceMap": true,
    "namedChunks": true,
    "extractLicenses": false,
    "vendorChunk": true,
    "buildOptimizer": false,
    "budgets": []
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "ui:build"
  },
  "configurations": {
    "development": {
      "browserTarget": "ui:build:development"
    }
  },
  "defaultConfiguration": "development"
}

【讨论】：

感谢您，将我的项目升级到 Angular 13 并且遇到了 OP 的确切问题。这将编译速度提高了大约 20 倍。

【解决方案4】：

我无法从这篇文章的其他答案中找到解决方案。我确实设法通过运行ng update @angular/cli --migrate-only update-angular-config-v12 最终消除了这个问题。注意：接受的答案中提到的迁移对我也不起作用，我一直收到一条错误消息，指出“未安装软件包”。

【讨论】：

【解决方案5】：

升级到 Angular 13。这解决了我的问题。

【讨论】：

不回答关于 Angular 12 的问题