こんにちは。よっしーです(^^)
今日は、SvelteKitのリファレンスについて解説して います。
背景
SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
KitConfig
kit プロパティは SvelteKit を設定するために使用され、以下のようなプロパティを持つことができます：
svelte.config.js ファイル内の kit オブジェクトは、SvelteKit アプリケーションの核となる設定を定義します。このプロパティによって、アプリケーションのルーティング、ビルド、デプロイなどの多くの側面をカスタマイズできます。
例えば：
const config = {
kit: {
// KitConfig プロパティがここに入ります
adapter: adapter(),
paths: {
base: '/my-app',
assets: 'https://cdn.example.com'
},
// その他の設定...
}
};
KitConfig には多くのプロパティが含まれる可能性があり、プロジェクトの要件に応じて以下のような設定が可能です：
- adapter: アプリケーションのデプロイ先環境を定義します（Node.js、静的サイト、AWS Lambda など）
- paths: ベースパスやアセットパスなどのパス設定
- prerender: プリレンダリングの設定
- env: 環境変数の扱い方
- csp: コンテンツセキュリティポリシー設定
- alias: インポートパスのエイリアス
- files: さまざまなファイルやディレクトリの場所
- outDir: ビルド出力先のディレクトリ
- version: アプリケーションのバージョン管理方法
こうした設定を変更することで、SvelteKit アプリケーションの動作を特定の要件に合わせてカスタマイズできます。
（注：具体的な各プロパティの詳細説明がドキュメントにはさらに記載されていると思われますが、入力された文章には含まれていないため、一般的な説明に留めています。）
prerender
プリレンダリングに関連する設定です。
concurrency
- デフォルト値:
1
同時にプリレンダリングできるページ数を指定します。JavaScriptはシングルスレッドですが、プリレンダリングのパフォーマンスがネットワーク制約の場合（例：リモートCMSからコンテンツを読み込む場合）、ネットワークレスポンスを待機している間に他のタスクを処理することでスピードアップできます。
crawl
- デフォルト値:
true
SvelteKitがentriesからリンクを辿ってプリレンダリングするページを見つけるかどうかを指定します。
entries
- デフォルト値:
["*"]
プリレンダリングするページ、またはクロールを開始するページ（crawl: trueの場合）の配列です。*文字列には、必須の[parameters]を含まないすべてのルートが含まれ、オプションのパラメータは空として含まれます（SvelteKitはパラメータがどのような値を持つべきかを知らないため）。
handleHttpError
- デフォルト値:
"fail" - バージョン1.15.7以降で利用可能
アプリのプリレンダリング中に発生したHTTPエラーへの対応方法です。
'fail'— ビルドを失敗させます'ignore'– エラーを無視して続行します'warn'— 続行しますが、警告を表示します(details) => void—status、path、referrer、referenceType、messageプロパティを持つdetailsオブジェクトを受け取るカスタムエラーハンドラー。この関数からthrowすると、ビルドは失敗します
設定例
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
prerender: {
handleHttpError: ({ path, referrer, message }) => {
// 意図的な404ページへのリンクは無視
if (path === '/not-found' && referrer === '/blog/how-we-built-our-404-page') {
return;
}
// それ以外の場合はビルドを失敗させる
throw new Error(message);
}
}
}
};
handleMissingId
- デフォルト値:
"fail" - バージョン1.15.7以降で利用可能
あるプリレンダリングされたページから別のページへのハッシュリンクが、宛先ページのidに対応していない場合の対応方法です。
'fail'— ビルドを失敗させます'ignore'– エラーを無視して続行します'warn'— 続行しますが、警告を表示します(details) => void—path、id、referrers、messageプロパティを持つdetailsオブジェクトを受け取るカスタムエラーハンドラー。この関数からthrowすると、ビルドは失敗します
handleEntryGeneratorMismatch
- デフォルト値:
"fail" - バージョン1.16.0以降で利用可能
entriesエクスポートによって生成されたエントリが、生成元のルートと一致しない場合の対応方法です。
'fail'— ビルドを失敗させます'ignore'– エラーを無視して続行します'warn'— 続行しますが、警告を表示します(details) => void—generatedFromId、entry、matchedId、messageプロパティを持つdetailsオブジェクトを受け取るカスタムエラーハンドラー。この関数からthrowすると、ビルドは失敗します
origin
- デフォルト値:
"http://sveltekit-prerender"
プリレンダリング中のurl.originの値です。レンダリングされたコンテンツに含まれる場合に役立ちます。
プリレンダリングとは
プリレンダリングは、ビルド時にページをHTMLとして生成するプロセスです。これにより：
- サーバーサイドレンダリング（SSR）の負荷を減らせる
- 静的サイトホスティングが可能になる
- 初期ロード時間が改善される
concurrency設定の活用
大量のページをプリレンダリングする場合やAPIコール多数を含むページでは、値を増やすことでビルド時間を短縮できます：
// svelte.config.js
export default {
kit: {
prerender: {
concurrency: 4 // 4ページを同時にプリレンダリング
}
}
};
エラー処理戦略の選択
プロダクション環境では、エラーを厳格に管理したいかもしれませんが、開発中はより寛容にできます：
// svelte.config.js - 開発環境用
export default {
kit: {
prerender: {
handleHttpError: 'warn', // エラーを警告だけにする
handleMissingId: 'warn' // IDが見つからない場合も警告だけにする
}
}
};
特定ページのみのプリレンダリング
すべてのページをプリレンダリングしたくない場合：
// svelte.config.js
export default {
kit: {
prerender: {
entries: ['/about', '/blog'] // これらのページとその子ページだけをプリレンダリング
}
}
};
プリレンダリングは静的サイト生成や、パフォーマンス最適化において非常に強力な機能ですが、動的コンテンツが多いサイトでは制限もあります。適切な設定を選択することで、プロジェクトに最適なバランスを見つけられます。
おわりに
今日は、 SvelteKitのリファレンスについて解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント