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

我发现对我来说，这个问题是通过使用watch标志（即

）解决的

ng build --watch=true

这将持续运行，并且仅在保存时自动生成文件。由于只对实际更改产生了.js个文件，因此代码的微小更改将我的构建时间从8秒降低到了<1秒。

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

ng build命令仅生成一次输出文件，而不会生成   为他们服务。

ng build --watch命令将重新生成输出文件   源文件更改时。如果您正在使用此--watch标志，   在开发过程中进行构建并自动重新部署更改   到另一台服务器。

为生产而构建时，您可能应该将ng build与必要的选项一起使用，以便完成必要的优化。

Answer 3

根据https://github.com/angular/angular-cli/issues/6795使用var topTen = []; var data = { "name": localStorage.getItem("topTenPlayer"), "points": pontos }; var topTenAux = []; if (localStorage.getItem("topTenList") == null) { topTen.push(data); } else { topTenAux = JSON.parse(localStorage.getItem("topTenList")); topTenAux.push(data); } localStorage.setItem("topTenList", JSON.stringify(data)); console.log(topTen);加速构建。

Answer 4

在开发模式下，您可以将此标志更改为

"buildOptimizer": false

这对我有用。角度7。

Answer 5

添加可能仅与较新的 Angular 版本（10 及更高版本）相关的答案

我发现混合 CommonJS 和 AMD 依赖项是我的罪魁祸首。

angular 构建过程会发出这些类型的警告，以表明您处于这种情况：

Warning: xxxxxx.ts depends on 'yyyyyy.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

我自己的重建时间在这种状态下几乎无法忍受，将近 6 分钟 - 请注意这是一个重建 - 这意味着它只是为了保存一个修改过的打字稿文件：

Build at: 2021-05-28T07:39:58.559Z - Hash: 5f8c96f22c3daf60faa2 - Time: 234429ms

但是当我删除攻击性引用时，初始构建时间减少到大约 80 秒，而重建时间减少到 7-8 秒。

诚然，您可能并不总是能够删除对攻击性模块的引用，但在我的情况下，我能够为本地调试执行此操作，并在部署时保留它们。这大大加快了我的发展。

Answer 6

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

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

Answer 7

您可以像这样使用节点参数--max_old_space_size

node --max_old_space_size=4096 ./node_modules/.bin/ngbuild --prod --build-optimizer

但是我更喜欢通过环境进行设置：

NODE_OPTIONS=--max-old-space-size=4096

它两次加快了我们在CI管道上的构建过程。

Answer 8

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

在 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，这将进一步减少构建时间。

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

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

然后我只需要在命令行中运行：
```
npm run watch
```
看到构建所需的时间比以前少得多，而且在每次更改时，它都能更快地重建所有内容。

我的最终统计数据如下：

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

如何加速Angular构建过程

8 个答案: