Angular 12 'ng serve' 构建应用程序很慢，几乎像生产构建

Question

我刚刚将一个应用程序从 Angular 11.2.7 迁移到 Angular 12。一切运行良好，除了当我开发和使用 'ng serve' 时，重建时间是现在慢很多，到了令人沮丧的地步。

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

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

我还注意到现在一切都从缩小的“main.js”运行，即使在 ng 服务时也是如此。我似乎记得第 11 版没有这样做，但是运行个人未-在开发过程中缩小组件。也就是说，ng serve 现在似乎正在做一些像完整的生产构建每次我改变任何东西。我认为这是缓慢的根本原因，但是我不确定。

所以。 . .

我是否仍应使用 'ng serve' 在 Angular 12 中进行开发？

迁移时是否需要设置一个选项，也许是为了关闭完整的缩小重建，以保持旧的构建速度？

这是什么 'sealing phase'？对我来说这听起来像是一个生产构建术语！

谢谢

约翰

Answer 1

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

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

The aim of these changes is to reduce the configuration complexity and support the new "production builds by default" initiative.

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

"defaultConfiguration": "development"

阅读更多here

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

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

Answer 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 中查看源代码显示您的代码和注释并非全部在一行中。
惰性块文件的文件名很长，例如 default-src_app_common-crm_common-crm_module_ts.js 而不是 34.js

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

非常重要：

如果您运行不止一次，迁移似乎有一个 'bug-like behavior'。如果 aot 设置当前为真，那么迁移将删除它（因为默认为真，所以它是多余的）。但是，如果您再次运行它（缺少 aot 设置），那么它将被写为 false 并被有效禁用（因为它认为您正在从 11 迁移，其中它的缺失意味着 false 并且它认为您希望它保持错误）。

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

所以运行宁迁移实际上可以给人加速构建的错觉，但实际上它实际上只是禁用aot。

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

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

Answer 4

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

Angular 12 'ng serve' 构建应用程序很慢，几乎像生产构建

Angular 12 'ng serve' builds apps slowly, almost like production builds

angular

angular-material

angular12

非常重要：