web-dev-qa-db-ja.com

Angular 7アプリケーションの実動ビルド時間の改善

私のアプリケーションは、ng build --prodを使用して本番用にビルドするのに非常に長い時間がかかります

時にはそれで失敗することさえあります

致命的なエラー：ヒープ制限に近い無効なマークコンパクトの割り当てに失敗しました-JavaScriptヒープのメモリ不足

ビルド時間を短縮するためにできることはありますか？

angularangular-cliangular7ng-build
10
Daniel

ビルド時間を短縮するためにできることがいくつかあります。

ビルドプロセスのメモリ制限を増やす

ビルドコマンドは、64ビットマシンで1つのプロセスの最大メモリ制限が1.76 GBであるノードによって実行されます。ビルドコマンドに_--max-old-space-size_引数を追加することで増やすことができます

この引数はノードプロセス自体に渡す必要があるため、コマンドはnodeで直接実行する必要があります。プロセスへのRAM=の4096 MB（4GB）の割り当て例は次のとおりです。

_node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng build
_

メモリ制限を増やすと、「メモリ不足」エラーも防止されます。

プロセスが使用するメモリ量には制限があるようです。私のプロジェクトでは、メモリを12GBに増やすことでビルド時間が大幅に短縮されましたが、32GBに増やしてもそれ以上の改善はありませんでした。

.scssファイル内のnode_modulesへの参照を修正

相対パスを使用してnode_modulesから外部スタイルシートを参照すると、ビルドプロセスのパフォーマンスが低下するため、避ける必要があります。

ビルドプロセスはWebpackの_sass-loader_を使用します。これは、node_modulesの場所がチルダ_~_で参照される構文をサポートします。

相対パスの代わりにチルダを使用すると、ビルド時間が大幅に短縮されます。したがって、外部CSSスタイルシートをインポートする代わりに

_import "../../../../../node_modules/x/whatever.css"
_

つかいます

_import "~node_modules/x/whatever.css"
_

生産の最適化

デフォルトでは、プロダクションビルドは_angular.json_ファイルの設定を使用します。デフォルト値は

_"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true
}
_

特別な理由がない限り、実動ビルドのデフォルトから変更しないでください。

これらは、ビルド時間を短く保つための大きな部分です（特にsourceMapを無効にし、buildOptimizerを有効にする）。

Angular CLIバージョンを更新します

Angular CLI teambは、ビルドプロセスの速度を継続的に改善します。

ビルドのパフォーマンスがバージョン6から7に大幅にアップグレードされることは注目に値するため、_@angular/cli_ライブラリを常に最新の状態に保つことをお勧めします。

外部ライブラリ

高速なビルドアプリケーションを使用するには、インポートするライブラリに非常に注意する必要があります。

JQuery、lodash、momentなどの多くの一般的なライブラリはサイズが非常に大きく、Webpack構築プロセス用に適切に最適化されていません。

Webpackの Tree-Shaking をサポートするライブラリを探して、ビルドプロセスがアプリケーションで実際に使用されるライブラリの部分のみをバンドルできるようにします。

また、単一の関数（_get()など）のみを使用する必要がある場合は、ユーティリティライブラリ全体（lodashなど）を追加するというaddingに陥らないでください。

アセットの圧縮

アセット（多くの場合、イメージ）の圧縮は、大部分が些細な作業（Googleで「オンラインでイメージを圧縮する」）であり、ビルドプロセスとアプリケーション自体のパフォーマンスを向上させることができます。

ハードウェアの最適化

Javascriptはシングルスレッドであるため、複数のCPUコアを持つ利点はビルドプロセスの速度を上げません。

実際、ビルド中にCPUを監視すると、プロセス全体でほぼ1つのコアに100％の負荷がかかっていることがわかります。

継続的インテグレーションのセットアップの一部として生産フラグを使用してアプリケーションを定期的に構築している場合は、高いシングルスレッドパフォーマンスを備えたマシンの使用を検討できます（ベンチマークについては、 cpubenchmark.net を参照してください）

24
Daniel