106. 初期表示を軽くする — バンドルサイズが最初の敵

初期表示の速さを最も左右するのは、最初にダウンロードされるJavaScript(初期バンドル)のサイズです。武器はすでに学んだ2つ、ルートの遅延読み込み(loadComponent)と @defer です。機能自体は既習なので、このレッスンの主題は「どの画面・どの部品に効かせるか」という判断のほうです。

判断の目安は利用頻度と画面内の重さです。管理画面や設定画面のような「たまにしか開かないページ」はルートごと遅延読み込みし、初期画面の中にあるグラフや地図のような「重いが最初は見えなくてよい部品」は @defer で包みます。Lighthouseの「使用していないJavaScript」の指摘が、切り離す候補を教えてくれます。

肥大化は angular.json の budgets で機械的に検知できます。初期バンドルのサイズ上限を決めておき、超えたらビルド時に警告やエラーを出す仕組みで、「気づいたら重くなっていた」を防げます。逆に何でも遅延にするのは悪手で、よく使うページまで分割すると遷移のたびに待ちが発生します。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// angular.json の budgets 設定(抜粋)。
// 初期バンドルが 500kB を超えたら警告、1MB を超えたらビルドエラーにする。
// 「気づいたら肥大化していた」を CI の段階で止められる。
{
  "configurations": {
    "production": {
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kB",
          "maximumError": "1MB"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "4kB",
          "maximumError": "8kB"
        }
      ]
    }
  }
}

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗