mcpField
P
prefetch

prefetch

github.com/patternsdev開発2571.5k 回インストール28 週間前に更新
リポジトリ

prefetch について

prefetch は、Web 開発者向けのブラウザー読み込み最適化手法です。後続の画面で必要になりそうなリソースを事前取得する方法や Webpack での利用、帯域の使い過ぎを避ける考え方を説明します。

主な機能

  1. 01必要になりそうなリソースの事前取得
  2. 02Webpack magic comments の利用
  3. 03アイドル時の低優先度読み込み
  4. 04帯域使用とのトレードオフ

活用シーン

  1. 01後続ページのリソース準備
  2. 02クリック後のコンポーネント表示待ちの短縮
  3. 03遷移しそうなルートのリソース取得

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/patternsdev/skills --skill prefetch

インストール後、Claude Code で/prefetchを入力して読み込まれたか確認します。

詳細

プリフェッチ

プリフェッチ（<link rel="prefetch">）は、後続のルートやページで必要になる可能性のあるリソースを、必要になる前に取得できるブラウザー最適化機能です。プリフェッチはいくつかの方法で実現できます。HTML で宣言的に行う方法（以下の例など）、HTTP ヘッダー（Link: </js/chat-widget.js>; rel=prefetch）、サービスワーカー、または Webpack などを使った、よりカスタマイズされた方法があります。

使用する場面

  • ユーザーが特定のルートに移動したり、特定のリソースをすぐに必要としたりする可能性が高いと分かっている場合に使用します
  • これにより、後続のページ遷移で体感読み込み時間を短縮できます

使用しない場面

  • 必要になる可能性が低いリソースの場合 — 不要なプリフェッチは帯域幅を浪費し、重要なリクエストと競合します
  • 帯域幅が狭い、または従量制の接続の場合 — プリフェッチによってユーザーのデータ通信量が消費されます
  • プリフェッチしたリソースが頻繁に変更され、使用時には古くなっている場合

手順

  • <link rel="prefetch"> または Webpack のマジックコメント（/* webpackPrefetch: true */）を使ってリソースをプリフェッチします
  • 必要になる可能性が高いリソースのみをプリフェッチします — 帯域幅を消費するため、やりすぎないでください
  • プリフェッチされたリソースは、ブラウザーがアイドル状態のときに低い優先度で読み込まれます

詳細

<link rel="prefetch" href="/pages/next-page.html" />
<link rel="prefetch" href="/js/emoji-picker.js" />
プリフェッチ

表示状態やインタラクションに基づいてモジュールをインポートする方法を示す例では、ボタンをクリックしてコンポーネントを切り替えてから、実際にコンポーネントが画面に表示されるまでに、しばしば遅延が発生することが分かりました。これは、ユーザーがボタンをクリックしたときに、モジュールのリクエストと読み込みがまだ必要だったためです。

多くの場合、ページの初期レンダリング後すぐに、ユーザーが特定のリソースをリクエストすることが分かっています。すぐには表示されないため初期バンドルに含めるべきではありませんが、より良いユーザー体験を実現するために、読み込み時間をできるだけ短縮できると理想的です。

アプリケーション内でいずれ使用される可能性が高いと分かっているコンポーネントやリソースは、プリフェッチできます。インポート文にマジックコメントを追加することで、特定のバンドルをプリフェッチするよう Webpack に指示できます：/* webpackPrefetch: true */。

const EmojiPicker = import(/* webpackPrefetch: true */ "./EmojiPicker");

アプリケーションをビルドすると、EmojiPicker がプリフェッチされることを確認できます。

 Asset                             Size       Chunks                          Chunk Names
    emoji-picker.bundle.js         1.49 KiB   emoji-picker [emitted]          emoji-picker
    vendors~emoji-picker.bundle.js 171 KiB    vendors~emoji-picker [emitted]  vendors~emoji-picker
    main.bundle.js                 1.34 MiB   main  [emitted]                 main

Entrypoint main = main.bundle.js
(prefetch: vendors~emoji-picker.bundle.js emoji-picker.bundle.js)

実際の出力では、ドキュメントの head 内に rel="prefetch" を指定した link タグが表示されます。

<link rel="prefetch" href="emoji-picker.bundle.js" as="script" />
<link rel="prefetch" href="vendors~emoji-picker.bundle.js" as="script" />

プリフェッチされたモジュールは、ユーザーがリソースをリクエストする前に、ブラウザーによってリクエストされ、読み込まれます。ブラウザーがアイドル状態で、十分な帯域幅があると判断すると、リソースを読み込んでキャッシュするためにリクエストを送信します。リソースがキャッシュされていれば、ユーザーがボタンをクリックした後にリクエストの完了を待つ必要がないため、読み込み時間を大幅に短縮できます。キャッシュから読み込み済みのリソースを取得するだけで済みます。

プリフェッチは読み込み時間を最適化する優れた方法ですが、やりすぎないでください。ユーザーが結局 EmojiPicker コンポーネントをリクエストしなかった場合、リソースを不必要に読み込んだことになります。これによってユーザーに費用が発生したり、アプリケーションの動作が遅くなったりする可能性があります。必要なリソースのみをプリフェッチしてください。

ソース

参考資料

コメント

Markdown 対応