Svelte入門：リファレンス Configuration -Vol.13-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景
KitConfig
1. output
おわりに

背景

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 アプリケーションの動作を特定の要件に合わせてカスタマイズできます。

（注：具体的な各プロパティの詳細説明がドキュメントにはさらに記載されていると思われますが、入力された文章には含まれていないため、一般的な説明に留めています。）

output

ビルド出力形式に関するオプションです。

preloadStrategy

デフォルト値: "modulepreload"
バージョン1.8.4以降で利用可能

SvelteKitは初期ページに必要なJavaScriptモジュールを事前に読み込み（プリロード）し、インポートの「滝状の読み込み」（ウォーターフォール）を避けることで、アプリケーションの起動を高速化します。以下の3つの戦略があり、それぞれ異なるトレードオフがあります：

modulepreload – <link rel="modulepreload">を使用します。Chromiumベースのブラウザ、Firefox 115+、Safari 17+で最良の結果をもたらします。古いブラウザでは無視されます。
preload-js – <link rel="preload">を使用します。ChromiumとSafariでウォーターフォールを防ぎますが、Chromiumでは各モジュールを2回パース（スクリプトとして1回、モジュールとして1回）します。Firefoxではモジュールが2回リクエストされます。Chromiumユーザーに対して非常に軽微な性能低下を犠牲にして、iOSデバイスのユーザーのパフォーマンスを最大化したい場合に適しています。
preload-mjs – <link rel="preload">を使用しますが、.mjs拡張子を付けることでChromiumでの二重パースを防ぎます。一部の静的Webサーバーでは、.mjsファイルにContent-Type: application/javascriptヘッダーを付けて配信できず、アプリケーションが動作しなくなる場合があります。それが当てはまらない場合、modulepreloadがより広くサポートされるまでは、最大多数のユーザーに最高のパフォーマンスを提供するオプションです。

bundleStrategy

デフォルト値: 'split'
バージョン2.13.0以降で利用可能

バンドル戦略オプションは、アプリのJavaScriptとCSSファイルの読み込み方法に影響します。

'split'の場合、アプリを複数の.js/.cssファイルに分割し、ユーザーがアプリ内を移動するにつれて遅延読み込みされます。これがデフォルトであり、ほとんどのシナリオで推奨されます。
'single'の場合、アプリ全体のコードを含む1つの.jsバンドルと1つの.cssファイルを作成します。
'inline'の場合、アプリ全体のすべてのJavaScriptとCSSをHTMLにインライン化します。結果はサーバーなしで使用可能です（つまり、ブラウザでファイルを直接開くだけで使えます）。

'split'を使用する場合、Vite設定のbuild.rollupOptions内のoutput.experimentalMinChunkSizeとoutput.manualChunksを設定することで、バンドル動作をさらに調整できます。

アセットをインライン化したい場合は、Viteのbuild.assetsInlineLimitオプションを適切なサイズに設定し、Viteを通じてアセットをインポートする必要があります。

vite.config の例

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()],
	build: {
		// インポートされたすべてのアセットをインライン化
		assetsInlineLimit: Infinity
	}
});

src/routes/+layout の例

<script lang="ts">
	// Viteを通じてアセットをインポート
	import favicon from './favicon.png';
</script>

<svelte:head>
	<!-- このアセットはbase64 URLとしてインライン化されます -->
	<link rel="icon" href={favicon} />
</svelte:head>

解説

preloadStrategy について

この設定は、JavaScriptモジュールをどのように先読み（プリロード）するかを制御します。これが重要な理由は、モジュールの読み込みが「ウォーターフォール」と呼ばれる状態になると、パフォーマンスが低下するからです。

ウォーターフォールとは: モジュールAがロードされ、そのモジュールが別のモジュールBを必要とするため、Bのロードが開始される、というように順番に発生するロード処理です。これではモジュールを並列でロードできず、アプリの起動が遅くなります。

3つの戦略の特徴:

modulepreload（デフォルト）:
- 最新のブラウザで最も効率的
- <link rel="modulepreload">を使用
- 古いブラウザではこの機能が無視されるため、その場合はパフォーマンス向上が見込めない
preload-js:
- より広いブラウザ互換性がある
- ChromiumとSafariではウォーターフォールを防止
- ただしChromiumでは各モジュールを2回パース処理するという欠点がある
- Firefoxではモジュールが2回リクエストされる問題がある
preload-mjs:
- .mjs拡張子を使うことでChromiumの二重パース問題を解決
- しかし一部のWebサーバーでは.mjsファイルを正しく処理できず、アプリが動作しなくなるリスクがある

bundleStrategy について

この設定はアプリケーションのコードをどのようにバンドル（パッケージ化）するかを決定します。

split（デフォルト）:
- アプリを複数の小さなJSとCSSファイルに分割
- ユーザーが必要なページに移動したときに必要なファイルだけを読み込む（遅延ロード）
- 初期ロード時間を短縮し、必要なページのみのコードをダウンロードするため効率的
- 大規模なアプリに特に有効
single:
- アプリ全体を1つのJSバンドルと1つのCSSファイルにまとめる
- 最初のロード時には時間がかかるが、その後のページ遷移は高速
- 小〜中規模のアプリケーションに適している
inline:
- すべてのJSとCSSをHTMLファイル自体に埋め込む
- サーバーなしでも機能する（静的HTMLファイルとして配布可能）
- 小規模なアプリや単一ページのアプリケーションに適している
- オフラインでの使用や、特殊な環境での配布に便利

選択のポイント:

通常は分割（split）が推奨されます
モバイルユーザーが多い場合や古いブラウザ対応が必要な場合は、プリロード戦略を調整すると良いでしょう
小規模なアプリやオフライン使用が必要な場合は、single や inline が有用です

これらの設定を適切に選択することで、アプリケーションのパフォーマンスと使いやすさを大幅に向上させることができます。

おわりに

今日は、 SvelteKitのリファレンスについて解説しました。

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)