如何加速Angular构建过程

Question

我努力解决在TypeScript文件中的一些变化后每个构建需要超过20分钟的问题.我运行这个命令ng build --output-path=..\..\static\angularjs.

如果我在Microsoft PowerShell上运行它:它需要25 - 30秒.这是很多时间.

环境

• Windows 10
• 8 GB-Ram
• PyCharm 64
• MS PowerShell

有人知道,如何加快速度？

Answer 1

我的应用程序需要28秒才能构建,但我已将时间减少到9秒.使用这面旗帜

ng build --source-map=false

你可以看到比较时间的时间差异:

ng build --stats-json 

ng build --stats-json --source-map=false

源映射仅用于调试,希望它有所帮助

Answer 2

根据其他人的答案，我创建了自己的配置，这将开发构建时间减少了三倍。

1. 在angular.json我创建了一个新的配置文件，"development"名为projects.<my-project-name>.architect.build.configurations：

   "development": {
     "optimization": false,
     "outputHashing": "none",
     "sourceMap": true,
     "namedChunks": false,
     "aot": true,
     "extractLicenses": false,
     "statsJson": false,
     "progress": true,
     "vendorChunk": true,
     "buildOptimizer": false
   },
   "production": {
     ...
   

   这里我启用了源映射。如果您不需要它们，可以将sourceMap标志设置为false，这将进一步减少构建时间。

2. 在package.json文件中我添加了一个名为的新脚本watch：

   "scripts": {
     ...
     "watch": "ng build --watch --configuration development"
   }
   

3. 然后我只需要在命令行中运行：

   npm run watch
   

   并看到构建花费的时间比以前少得多，而且每次更改时它都会更快地重建所有内容。

我的最终统计数据如下：

• 默认设置：77 秒
• 使用源地图：25 秒
• 没有源映射：21 秒

Answer 3

我发现对我来说,这个问题是通过使用watch标志解决的,即

ng build --watch=true

这会不断运行,并且仅在保存时自动构建文件.对于代码中的小变化,它将构建时间从8秒减少到<1秒,因为它只生成.js实际更改的文件.

来自https://angular.io/guide/deployment

该ng build命令只生成一次输出文件,但不提供它们.

ng build --watch当源文件更改时,该命令将重新生成输出文件.--watch如果您在开发期间构建并自动将更改重新部署到另一台服务器,则此标志非常有用.

ng build在构建生产时,您应该使用必要的选项,以便完成必要的优化.

Answer 4

如果这个答案对您有帮助，请留下评论，说明哪些具体建议有帮助！

我最近从 Angular 8 升级到 Angular 13。我的构建时间相当（Angular 8 和 Angular 13 都大约 10 分钟），但我在重建时间上遇到了困难（即我--watch在开发时使用；如果我只更改几个文件） ，Angular 8 在10秒内重新编译；Angular 13 还需要10 分钟！）。

我使用angular.json（参见下面的屏幕截图）来指定"aot":false，并且我看到了更好的重新构建时间（回到约 8-10 秒） ——此选项与angular-cli ng build命令 的--aot=false.

我添加我的答案是因为目前没有其他答案建议尝试使用"aot:false. 事实上，许多最受欢迎的答案都明确建议尝试"aot":true！这些答案并没有错（事实上，它们确定了可以提高性能的选项，例如"sourceMap":false。）但对我来说，"aot":false这是游戏规则的改变者。

另外，我认识到“AOT”（提前编译）的好处，例如“在浏览器中渲染速度更快”。我仍然在生产版本中使用“AOT”("aot":true ) ；但我在这里的答案集中在开发上，我用它--watch来重新构建文件更改，所以我想要快速重新构建，并且我不介意“浏览器中的渲染速度较慢”。

一些有用的资源（如果我找到更多，我会添加更多）：

• 此评论表明 AOT 编译可能"aot":false比 JIT 编译慢，这可能是对我有用的原因
• 此评论node --inspect可能会帮助您使用和分析您的构建过程（以找到瓶颈/解决较长构建时间的问题）chrome://inspect
• 此评论有更多有关分析的提示NG_BUILD_PROFILING=1

其他可能提高构建性能的技巧：

• 这篇博文描述了NG_PERSISTENT_BUILD_CACHE=1For Angular <=12 选项（我认为这个选项是 Angular 13 中的默认选项， RFC 在这里
  • 在 Angular 13 中，NG_PERSISTENT_BUILD_CACHE可能会被属性相关/替换angular.json "cache"，如 Angular 13 发布博文和本文档中所述；默认值为true ！​​"cache": { "enabled": ...
• 另一个 Git 问题讨论使用自定义构建器，例如@angular-builders/custom-webpack:browser, 和"aot":false

一些相关的东西（更多实验性/可能没有帮助）：

• 像这样的博文建议您可以使用自己的构建器（例如 ）esbuild来查看构建性能的改进——但这更具实验性，可能不支持在 Angular 中执行操作的“本机方式”（即属性templateUrl）。而且它们可能会付出一定的代价（即更大的捆绑尺寸）
• 这段来自 Google Chrome 开发者的视频讨论了“启动性能”的原则，但它已经存在超过 1 年了，并且重点关注捆绑包大小和其他最佳实践；因此，视频可能会提出降低构建性能的建议（为了其他权衡，例如更小的捆绑包或更容易的调试）。

编辑 我在 angular.json 中设置了“aot”：false`，如下面的屏幕截图所示。请注意 JSON 中的位置/路径是：

root>projects>{craft-app}>architect>build>configurations>{development}

...其中{craft-app}是您需要构建的角度项目的具体名称，{development}是您想要使用并在参数中指定的配置的具体名称-c，如下所示：

ng build craft-app -c=development

Answer 5

根据https://github.com/angular/angular-cli/issues/6795使用--build-optimizer=false加速构建.

Answer 6

这将我的构建时间缩短了 70%

      "optimization": false,
      "outputHashing": "none",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "showCircularDependencies": false,
      "aot": true,
      "extractLicenses": false,
      "statsJson": false,
      "progress": false,
      "vendorChunk": true,
      "buildOptimizer": false

Answer 7

这将我的构建时间减少到50％

          "optimization": false,
          "outputHashing": "none",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "showCircularDependencies": false,
          "aot": true,
          "extractLicenses": false,
          "statsJson": false,
          "progress": false,
          "vendorChunk": true,
          "buildOptimizer": false,