architecture/component-size · Component size

Very large components should be split up.

Severity: info · Category: architecture

What it checks

Flags a .svelte component longer than 200 lines (static/CLI analysis of src/**/*.svelte).

The threshold comes from the same survey of real Svelte 5 codebases as architecture/prop-count, and sits deliberately above the measured 90th and 95th percentiles: length is a weaker signal than a high prop count, because tables, forms, and generated markup are legitimately long.

Why it matters

A very large component is hard to read, test, and reuse, and usually means several responsibilities should be split out, a common shape for AI-generated code.

How to fix

Extract sections into smaller, focused child components (and reusable .svelte.ts modules for logic).

Configuration

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

Mode differences

None. This rule reads source, the same .svelte and .ts files, everywhere it runs. The CLI, the Vite plugin’s build pass, and the live dashboard’s static baseline all report it identically, and the rendered-HTML pass never re-evaluates it. Scoping a run with --route skips it: component-scoped rules have no route to attribute a finding to.

Disabling

Silence a single occurrence with <!-- svelte-vitals-disable-next-line architecture/component-size --> on the line above it, or turn the rule off:

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