コード分割と動的インポート
ルートごとにバンドルを自動分割し、dynamic import()で必要なときにチャンクを読み込みます。
「コード分割と動的インポート」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
自動分割
SvelteKit はルートごとにバンドルを自動的に分割します。訪問者は、実際に訪れたルートに必要な JS だけをダウンロードします。
動的インポート
さらに細かく分割するには、動的な import() を使用して、必要なときにモジュールを読み込みます。
const Heavy = (await import("./Heavy.svelte")).default;条件付き読み込み
特定のユーザー操作で必要になった場合にのみ、容量の大きいライブラリを読み込みます。
async function openEditor() {
const { default: Editor } = await import("./Editor.svelte");
// ...
}チャンクの命名
Vite はチャンクに適切な名前を付けます。必要であれば、webpackChunkName 形式のコメントでヒントを与えることもできます。
プリロード
data-sveltekit-preload-code を使用すると、ホバー時にルートのコードをプリロードできます。
バンドルサイズ
初期バンドルが小さいほど、ページの読み込みが速くなり、Core Web Vitals も改善します。
ツリーシェイキング
SvelteKit は Vite/Rollup を介して、使用されていないエクスポートを自動的にツリーシェイキングします。
遅延読み込みコンポーネント
動的インポートを、読み込み完了後に一度だけレンダリングするコンポーネントでラップします。
注意点
動的インポートによって非同期境界が追加されます。読み込み状態を適切に処理してください。
バンドル分析
バンドルビジュアライザーを使用して、次に分割すべき部分を特定します。
分割しない場面
小さなモジュールでは、分割のコストが節約効果を上回ります。適切な粒度を見つけるにはプロファイリングを行ってください。
確認
SvelteKit はデフォルトでどのようにバンドルを分割しますか？
まとめ
SvelteKit のコード分割はルートごとに自動で行われます。より細かな遅延読み込みには、動的な import() を使用します。
よくある質問
「コード分割と動的インポート」レッスンは無料ですか？
はい。「コード分割と動的インポート」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「コード分割と動的インポート」で何を学びますか？
ルートごとにバンドルを自動分割し、dynamic import()で必要なときにチャンクを読み込みます。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「コード分割と動的インポート」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。