angular.jsonのextractCssとは？【Angular12から廃止】

2024年5月30日

今回はangular.jsonのextractCssについてご説明いたします。

extractCssオプションはAngular12から廃止になりました。

angular.jsonのextractCssとは？【Angular12から廃止】

Angular11以前においてextractCssのオプションはangular.jsonに定義され、boolean型でありtrueかfalseを設定しておりました。

extractCssがtrueであればAngularのビルドプロセスはすべてのCSSが別個のファイルに抽出され、HTMLファイルとCSSファイルが分離されることによってブラウザのキャッシュが有効に活用されます。
これによってパフォーマンスが向上する可能性があるわけですね。

Angular11以前ではangular.jsonに次のように定義されておりました。

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "extractCss": true,
            "styles": [
              "src/styles.scss",
              "node_modules/@fullcalendar/common/main.css",
              "node_modules/@fullcalendar/daygrid/main.css",
              "node_modules/@fullcalendar/list/main.css",
              "node_modules/@fullcalendar/resource-timeline/main.css",
              "node_modules/@fullcalendar/timegrid/main.css",
              "node_modules/@fullcalendar/timeline/main.css"
            ]
          }
        }
      }
    }
  }
}