architecture/component-size · コンポーネントサイズ

大きくなりすぎたコンポーネントは分割しましょう。

重大度: info · カテゴリ: architecture

チェック内容

200 行を超える .svelte コンポーネントを検出します（CLI による src/**/*.svelte の静的解析）。

閾値は architecture/prop-count と同じ、実在する Svelte 5 のコードベース調査に基づきます。実測した 90・95 パーセンタイルのどちらよりも意図的に緩く設定してあります。行数はプロップの多さに比べると弱いシグナルで、テーブルやフォーム、生成されたマークアップは正当に長くなるためです。

なぜ重要か

巨大なコンポーネントは読みづらく、テストも再利用もしにくいうえ、複数の責務を切り出すべきサインであることが多いです。AI が生成したコードによく見られる形です。

修正方法

小さく役割を絞った子コンポーネント（ロジックは再利用可能な .svelte.ts モジュール）に切り出します。

設定

export default {
  rules: { 'architecture/component-size': { options: { max: 300 } } }
};

モードによる違い

ありません。このルールが読むのは同じ .svelte / .ts のソースファイルなので、CLI、Vite プラグインのビルド、ライブダッシュボードの静的ベースラインのいずれでも結果は同一で、レンダリング済み HTML の解析で再評価されることもありません。--route で実行範囲を絞ると、このルールは動きません。コンポーネントスコープのルールには、検出を紐づけるルートが無いためです。

無効化

個別に抑制するには、対象行の直前に <!-- svelte-vitals-disable-next-line architecture/component-size --> を置きます。ルールごと無効化するには、次のように設定します。

export default {
  rules: {
    'architecture/component-size': 'off'
  }
};