コンテンツにスキップ

プラグインモード

@svelte-vitals/vite は Vite / SvelteKit プラグインで、vite build に便乗してプリレンダリングされた HTML の <head> を解析し、CLI と同じ SEO およびパフォーマンスルールを実行します。実際の HTML 出力を検査するため、ライブラリに依存しません。ビルドモードではさらに、src/ 配下のソース — コンポーネント、runes モジュール(.svelte.ts/.svelte.js)、SvelteKit のルート/フックファイル — を走査し、Correctness・Security・Architecture、およびコンポーネントスコープの Performance(バンドル)ルールも検証します — CLI と同じファイルスコープのルールで、デフォルトで有効です。検出結果が failOn の閾値に達するとビルドが失敗します。

ESM のみ(Node 22.13+)。ES モジュールのみを提供します。require() は設計上サポートされていません。

Terminal window
npm install --save-dev @svelte-vitals/vite
# または
pnpm add -D @svelte-vitals/vite

vite.config.tssvelteVitals を追加します:

vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { svelteVitals } from '@svelte-vitals/vite';
export default {
plugins: [sveltekit(), svelteVitals({ failOn: 'critical', report: 'console' })]
};
オプション デフォルト 説明
failOn 'critical' | 'warning' | 'info' 'critical' ビルドを失敗させる最低重大度
report 'console' | 'json' | false 'console' 分析レポートの出力形式
outFile string JSON レポートをこのパスのファイルに書き込む
rules Record<string, 'off' | 'critical' | 'warning' | 'info'> {} ルールごとの上書き — ルールを無効化するか重大度を変更する
metaComponents string[] ヘッドメタデータを出力するカスタムコンポーネント名
treatDynamicAs 'pass' | 'warn' | 'fail' 'pass' 動的に設定されたメタデータの扱い方
weights Partial<Record<Category, number>> 各カテゴリ 1 レポート内の組み合わせた Health スコアのカテゴリごとの重み
prerenderDir string プリレンダリングページディレクトリの上書き
ui boolean true vite dev 中にライブダッシュボードを配信するかどうか。false にするとビルド時ゲートのみになる
cwd string Vite のルート プロジェクトルート

@svelte-vitals/vite はプロジェクトルートの svelte-vitals.config.* を自動的に読み込みます — 上記の明示的なオプションは常に設定ファイルの値より優先されます。優先順位のルールと、ライブダッシュボードでの利用方法については 設定ファイル § Vite プラグインで設定ファイルを再利用する を参照してください。

分析されるのはプリレンダリングされたルートのみです。SSR や動的ルートには svelte-vitals CLI を使用してください。

vite build 中、SvelteKit がページをプリレンダリングした後、@svelte-vitals/vite は出力された HTML ファイルを探して各ページの <head> を解析し、完全なルールセットを実行します。いずれかの検出結果が failOn の閾値に達すると、ビルドプロセスは非ゼロのコードで終了します。

開発時には、@svelte-vitals/vite/__svelte-vitals/ でライブダッシュボードも配信します(デフォルトで有効)。詳細は ライブダッシュボード を参照してください。