どのようにバンドルからスタイルシートを除外すると怠惰な角度でそれらをロードするには?

我々は、複数のテーマのサポートの例を取ることによってこれを理解しようとします.

複数のテーマファイル

のは、主なスタイルとは別に仮定しましょう.CSSファイルには、次の2つのテーマファイルがあります.

src/スタイル/テーマ/テーマのライト.CSS

SRC/スタイル/テーマ/テーマダーク.CSS

次に、あなたはそれらをangular.json ’sオプション

"styles": [
    "src/styles.css",
    "src/styles/themes/theme-light.css",
    "src/styles/themes/theme-dark.css"
  ]

最後に、ユーザーの選択や好みに基づいて特定のテーマの読み込みを処理します.
すべては素晴らしい作品ですが、両方のテーマファイルは、アプリケーションのバンドルのすべての時間の一部です.

テーマファイルの除外

角を少し変えましょう.BSONからテーマファイルを除外するJSON :

"styles": [
    "src/styles.css",
    {
      "input": "src/styles/themes/theme-light.css",
      "inject": false,
      "bundleName": "theme-light"
    },
    {
      "input": "src/styles/themes/theme-dark.css",
      "inject": false,
      "bundleName": "theme-dark"
    }
  ]

ここで学ぶ2つの新しいオプション

inject : このfalseを設定すると、「入力」パスから

bundleName : 「入力」パスからスタイルシートを含む別々のバンドルが作成されます

プロジェクトを構築しようとすると、別のファイルが生成され、出力は以下のようになります.

注意theme-light.css and theme-dark.css 怠惰なチャンクファイルの一部です.怠惰なチャンクファイルは、アプリケーションの負荷時間をスピードアップします.

怠惰な負荷テーマファイル

我々はなんとか彼らを束から除外しました、そして、彼らは外部で利用できます.今、質問はこれらのテーマファイルをロードする方法が発生します?
それらをロードする1つの方法は、直接リンクタグでそれらの束を使用することです:

<link
  rel="stylesheet"
  href="theme-dark.css"
  media="(prefers-color-scheme: dark)" />
<link
  rel="stylesheet"
  href="them-light.css"
  media="(prefers-color-scheme: light)"
/>

ドキュメントベースのURLを微調整する必要があるでしょうbase タグを正常にロードします.

結論

我々は、単に設定によってスタイルシートを除外できることを学んだinject ワークスペース設定ファイルでfalseです.angular.json . そして、要求に応じてロードするには、bundleName オプション.
バンドルからスタイルシートを除外する利点は、アプリケーションの最初の負荷時間を改善し、最終的なユーザーエクスペリエンスを向上させるバンドルサイズが小さくなります.