Angularアプリケーションのビルド

Angular CLIアプリケーションまたはライブラリは、ng buildコマンドでビルドできます。 これにより、TypeScriptコードがJavaScriptにコンパイルされ、必要に応じて出力が最適化、バンドル、ミニファイされます。

ng buildは、angular.jsonで指定されたデフォルトプロジェクトのbuildターゲットのビルダーのみを実行します。 Angular CLIには、通常buildターゲットとして使用される4つのビルダーが含まれています。

ng newで生成されたアプリケーションは、デフォルトで@angular/build:applicationを使用します。 ng generate libraryで生成されたライブラリは、デフォルトで@angular/build:ng-packagrを使用します。

特定のプロジェクトで使用されているビルダーは、そのプロジェクトのbuildターゲットを調べることで判断できます。

{
  "projects": {
    "my-app": {
      "architect": {
        // `ng build` invokes the Architect target named `build`.
        "build": {
          "builder": "@angular/build:application",
          …
        },
        "serve": { … }
        "test": { … }
        …
      }
    }
  }
}

このページでは、@angular/build:applicationの使用法とオプションについて説明します。

出力ディレクトリ

このビルドプロセスの結果はディレクトリに出力されます（デフォルトではdist/${PROJECT_NAME}）。

サイズバジェットの設定

アプリケーションは機能が増えるにつれて、サイズも大きくなります。 CLIを使用すると、設定でサイズしきい値を設定して、アプリケーションの各部分が定義したサイズ境界内に収まるようにできます。

サイズ境界は、CLI設定ファイルangular.jsonの、各設定済み環境のbudgetsセクションで定義します。

{
  …
  "configurations": {
    "production": {
      …
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "250kb",
          "maximumError": "500kb"
        },
      ]
    }
  }
}

アプリケーション全体および特定のパーツに対してサイズバジェットを指定できます。 各バジェットエントリは、特定のタイプのバジェットを設定します。 たとえば、initialバジェットはアプリケーションのブートストラップに使用されるJavaScriptとCSSを測定し、ビルド出力サマリーに表示されるInitial Total値に対応します。 サイズ値は次の形式で指定します。

バジェットを設定すると、アプリケーションの特定のパーツが設定した境界サイズに達するか超えた場合に、ビルダーが警告またはエラーを報告します。

各バジェットエントリは、次のプロパティを持つJSONオブジェクトです。

遅延読み込みバンドルにバジェットを設定するには、type: "bundle"を使用し、nameにそのバンドルの名前を設定します。

{
  "budgets": [
    {
      "type": "bundle",
      "name": "admin",
      "maximumWarning": "250kb",
      "maximumError": "300kb"
    }
  ]
}

nameフィールドはバンドル名と一致し、生成されるファイル名ではありません。そのため、admin.*.jsのようなワイルドカードや正規表現パターンは使用しません。

次の例は、ベースラインを使用するバジェットを示しています。

{
  "type": "bundle",
  "name": "main",
  "baseline": "200kb",
  "maximumWarning": "10%",
  "maximumError": "20%"
}

この例では、バンドルが220kbを超えるとビルダーが警告を発し、240kbを超えるとエラーになります。

CommonJS依存関係の設定

アプリケーションとその依存関係の全体で、常にネイティブのECMAScriptモジュール (ESM) を優先してください。 ESMは、強力な静的解析サポートを備えた完全に規定されたWeb標準およびJavaScript言語機能です。これにより、他のモジュール形式よりもバンドル最適化が強力になります。

Angular CLIは、CommonJS依存関係をプロジェクトにインポートすることもサポートしており、これらの依存関係を自動的にバンドルします。 しかし、CommonJSモジュールは、バンドラーやミニファイアがそれらのモジュールを効果的に最適化するのを妨げ、結果としてバンドルサイズが大きくなる可能性があります。 詳細については、CommonJSがバンドルを大きくする仕組みを参照してください。

Angular CLIは、ブラウザアプリケーションがCommonJSモジュールに依存していることを検出すると、警告を出力します。 CommonJS依存関係に遭遇した場合は、メンテナーにECMAScriptモジュールのサポートを依頼するか、自分でそのサポートに貢献するか、またはニーズを満たす代替の依存関係を使用することを検討してください。 CommonJS依存関係を使用するのが最善の選択肢である場合は、angular.jsonにあるbuildオプションのallowedCommonJsDependenciesオプションにCommonJSモジュール名を追加することで、これらの警告を無効にできます。

"build": {
  "builder": "@angular/build:application",
  "options": {
     "allowedCommonJsDependencies": [
        "lodash"
     ]
     …
   }
   …
},

ブラウザの互換性を設定する

Angular CLIは、異なるブラウザバージョンとの互換性を確保するためにBrowserslistを使用します。 サポートされているブラウザに応じて、Angularは、ビルドされたアプリケーションがサポートされているブラウザによって実装されていない機能を使用しないように、特定のJavaScriptおよびCSS機能を自動的に変換します。ただし、Angular CLIは、不足しているWeb APIを補うためにポリフィルを自動的に追加しません。angular.jsonのpolyfillsオプションを使用してポリフィルを追加します。

デフォルトでは、Angular CLIは、現在のメジャーバージョンでAngularがサポートするブラウザに一致するbrowserslist設定を使用します。

内部設定を上書きするには、ng generate config browserslistを実行します。これにより、Angularがサポートするブラウザに一致する.browserslistrc設定ファイルがプロジェクトディレクトリに生成されます。

特定のブラウザとバージョンをターゲットにする方法の詳細は、browserslistリポジトリを参照してください。 このリストをより多くのブラウザに拡張することは避けてください。アプリケーションコードがより広範に互換性がある場合でも、Angular自体はそうではない可能性があります。 このリストのブラウザまたはバージョンのセットは、常に_減らす_べきです。

Tailwindの設定

AngularはTailwind CSS、ユーティリティファーストのCSSフレームワークをサポートしています。

Tailwind CSSをAngular CLIと統合するには、AngularでのTailwind CSSの使用を参照してください。

クリティカルCSSのインライン化

Angularは、First Contentful Paint (FCP)を改善するために、アプリケーションのクリティカルCSS定義をインライン化できます。 このオプションはデフォルトで有効になっています。stylesカスタマイズオプションでこのインライン化を無効にできます。

この最適化は、初期ビューポートのレンダリングに必要なCSSを抽出し、生成されたHTMLに直接インライン化します。これにより、ブラウザは完全なスタイルシートの読み込みを待たずに、より高速にコンテンツを表示できます。残りのCSSはバックグラウンドで非同期に読み込まれます。Angular CLIは、アプリケーションのHTMLとスタイルを分析するためにBeastiesを使用します。