ngx-admin は、エンタープライズ級の管理画面を迅速に構築するための Angular ベースの UI テンプレートとして広く利用されています。しかし、初期のアーキテクチャでは、リソースの事前読み込みや過度なレンダリングサイクルにより、初回アクセス時の遅延や UI 操作の途切れが生じるケースが見られました。Angular 18 の採用を機に、ビルドプロセスとランタイムの動作を再設計することで、これらのボトルネックを解消し、よりレスポンスの優れた実装へと移行しました。

パフォーマンス劣化の根本原因

以前のバージョンでは、以下の要因がフレームワークの動作を妨げていました。

• バンドルサイズの肥大化による初回描画の遅延
• デフォルトのチェンジデテクション戦略による不要な DOM 更新
• 重いビジュアライゼーションライブラリの同期読み込み

これらは、ルーター設定の最適化不足や、コンポーネントの更新トリガー管理が甘く、ブラウザのメインスレッドを長時間ブロックしていたことが原因です。

実装された最適化アプローチ

1. 動的ルーティングによるコードスプリッティング

機能単位でチャンクを分割し、ユーザーが実際に訪問したパスに対してのみモジュールを解読するように変更しました。Angular 18 では関数型ルーター設定が標準化されているため、以下のように loadComponent を採用します。

import { Routes } from '@angular/router';

export const appRoutes: Routes = [
  {
    path: 'analytics',
    loadComponent: () =>
      import('./views/analytics/analytics.component').then(m => m.AnalyticsView),
  },
  {
    path: 'settings',
    loadComponent: () =>
      import('./views/configuration/configuration.component').then(m => m.ConfigPanel),
  },
];

この手法により、ビルド後の初期チャンク容量を大幅に圧縮でき、ネットワーク転送時間の短縮に貢献します。

2. チェンジデテクション戦略の切り替え

コンポーネントの更新頻度を制御するため、ChangeDetectionStrategy.OnPush を適用しました。これにより、入力プロパティの変更イベントや非同期ストリームの完了、または明示的なトリガーが発生した時のみ再レンダリングが実行されます。

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
  selector: 'app-metric-card',
  templateUrl: './metric-card.html',
  styleUrls: ['./metric-card.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MetricCardComponent {
  @Input() currentValue: number = 0;
  @Input() label: string = '';
}

データ集約型のダッシュボード画面において、この設定によりブラウザの CPU 負荷が低下し、スクロール動作のフレームレートが安定しました。

3. ヘビーリソースの動的インポート

複雑なグラフ描画にはメモリ負荷の高いサードパーティ製ライブラリが利用されます。これらを初期化フェーズで読み込むのではなく、ユーザー操作や特定条件を満たした際に非同期的に取得するように構成を調整しました。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-visualizer',
  templateUrl: './visualizer.html'
})
export class VisualizerComponent implements OnInit {
  private chartLibrary: any = null;

  async ngOnInit() {
    try {
      const moduleRef = await import('@swimlane/ngx-charts');
      this.chartLibrary = moduleRef;
      this.initializeGraphData();
    } catch (error) {
      console.warn('Chart module failed to load:', error);
    }
  }

  private initializeGraphData() {
    // 描画ロジックの実装
  }
}

初期描画パスから重みのある依存関係を分離することで、インタラクティブになるまでの時間を短縮しています。

4. スタイルシートの分離とビルド最適化

ビルド構成において extractCss を有効化し、インラインスタイルを独立したアセットへ抽出しました。これにより HTML パース処理が軽量化され、コンテンツレンダリングのブロックを回避できます。angular.json のビルドオプションで以下を指定します。

"options": {
  "extractCss": true,
  "optimization": {
    "styles": {
      "minify": true,
      "inlineCritical": true
    }
  }
}

重要度の高いスタイルのみを HTML にインライン展開し、残りは非同期的にフェッチする構成を採用しました。

ベンチマーク比較結果

環境構築手順

最適化されたバージョンをローカルで検証するには、以下のコマンドを実行してください。

1. リポジトリの取得

git clone https://github.com/akveo/ngx-admin.git

2. 依存パッケージのインストール

cd ngx-admin && npm ci

3. 開発環境の起動

npm run start

ブラウザで http://localhost:4200 にアクセスすると、再設計されたレンダリングパイプラインを実際に確認できます。