Angular12'ngserve'构建应用程序的速度很慢，几乎就像生产构建一样

html5 • • 问答

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

我在 M1 iMac 上，使用节点 16.1.0，这是值得的。

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

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

所以 。. .

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

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

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

谢谢

约翰

回答

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

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

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

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

"defaultConfiguration": "development"

在这里阅读更多

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

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

  • I took your answer as the starting point and did this: created a brand new Angular 12 app, diffed angular.json in the migrated app against angular.json in the new app (there are a lot of differences, too many to mention here!) and brought the migrated app into line with the new app. It is now super fast again. Thanks!

回答

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

我以前的 angular.json 没有这个，坦率地说，这可能是我的错误 - 或者它可能是事后出现的一个功能。我仍在进行生产构建，这非常令人沮丧，因为它需要 3 分钟，而且没有任何东西告诉您它正在执行哪个构建。

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

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

  1. 在浏览器 devtools 中查看源代码不会在一行中显示您的代码和注释。
  2. Lazy Chunk Files 有很长的文件名，比如default-src_app_common-crm_common-crm_module_ts.js和不34.js

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

很重要：

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

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

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

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

  • With that said I'm still seeing builds taking almost 3 times as long as before. It might just be webpack 5 but if that's the case they urgently need to find a workaround because this just isn't going to work for me.

回答

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

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

以上是Angular12'ngserve'构建应用程序的速度很慢，几乎就像生产构建一样的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>