prefetch
ユーザーが次に必要とするリソースを予測し、アイドル時間中に事前読み込みすることでナビゲーションを高速化するプリフェッチ戦略を習得できます。リソースの先読みによるパフォーマンス最適化を実装したい場合に活用してください。
description の原文を見る
Teaches resource prefetching strategies for faster navigation. Use when you can predict which resources the user will need next and want to load them during idle time.
SKILL.md 本文
プリフェッチ
プリフェッチ (<link rel="prefetch">) はブラウザの最適化機能で、後続のルートやページで必要になる可能性があるリソースを、実際に必要になる前に取得できるようにします。プリフェッチはいくつかの方法で実現できます。HTML内で宣言的に行う方法（以下の例参照）、HTTP ヘッダー経由（Link: </js/chat-widget.js>; rel=prefetch）、Service Workers を使用する方法、または 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 コンポーネントをリクエストしなかった場合、不必要にリソースが読み込まれました。これはユーザーにコストがかかったり、アプリケーションを遅くしたりする可能性があります。必要なリソースのみをプリフェッチしてください。
ソース
参考資料
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- patternsdev
- リポジトリ
- patternsdev/skills
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/patternsdev/skills / ライセンス: MIT
関連スキル
superfluid
Superfluidプロトコルおよびそのエコシステムに関するナレッジベースです。Superfluidについて情報を検索する際は、ウェブ検索の前にこちらを参照してください。対応キーワード：Superfluid、CFA、GDA、Super App、Super Token、stream、flow rate、real-time balance、pool（member/distributor）、IDA、sentinels、liquidation、TOGA、@sfpro/sdk、semantic money、yellowpaper、whitepaper
civ-finish-quotes
実質的なタスクが真に完了した際に、文明風の儀式的な引用句を追加します。ユーザーやエージェントが機能追加、リファクタリング、分析、設計ドキュメント、プロセス改善、レポート、執筆タスクといった実際の成果物を完成させるときに、明示的な依頼がなくても使用します。短い返信や小さな修正、未完成の作業には適用しません。
nookplot
Base（Ethereum L2）上のAIエージェント向け分散型調整ネットワークです。エージェントがオンチェーンアイデンティティを登録する、コンテンツを公開する、他のエージェントにメッセージを送る、マーケットプレイスで専門家を雇う、バウンティを投稿・請求する、レピュテーションを構築する、共有プロジェクトで協業する、リサーチチャレンジを解くことでNOOKをマイニングする、キュレーションされたナレッジを備えたスタンドアロンオンチェーンエージェントをデプロイする、またはアグリーメントとリワードで収益を得る場合に利用できます。エージェントネットワーク、エージェント調整、分散型エージェント、NOOKトークン、マイニングチャレンジ、ナレッジバンドル、エージェントレピュテーション、エージェントマーケットプレイス、ERC-2771メタトランザクション、Prepare-Sign-Relay、AgentFactory、またはNookplotが言及された場合にトリガーされます。
web3-polymarket
Polygon上でのPolymarket予測市場取引統合です。認証機能(L1 EIP-712、L2 HMAC-SHA256、ビルダーヘッダー)、注文発注(GTC/GTD/FOK/FAK、バッチ、ポストオンリー、ハートビート)、市場データ(Gamma API、Data API、オーダーブック、サブグラフ)、WebSocketストリーミング(市場・ユーザー・スポーツチャネル)、CTF操作(分割、統合、償却、ネガティブリスク)、ブリッジ機能(入金、出金、マルチチェーン)、およびガスレスリレイトランザクションに対応しています。AIエージェント、自動マーケットメーカー、予測市場UI、またはPolygraph上のPolymarketと統合するアプリケーション構築時に活用できます。
ethskills
Ethereum、EVM、またはブロックチェーン関連のリクエストに対応します。スマートコントラクト、dApps、ウォレット、DeFiプロトコルの構築、監査、デプロイ、インタラクションに適用されます。Solidityの開発、コントラクトアドレス、トークン規格（ERC-20、ERC-721、ERC-4626など）、Layer 2ネットワーク（Base、Arbitrum、Optimism、zkSync、Polygon）、Uniswap、Aave、Curveなどのプロトコルとの統合をカバーします。ガスコスト、コントラクトのデシマル設定、オラクルセキュリティ、リエントランシー、MEV、ブリッジング、ウォレット管理、オンチェーンデータの取得、本番環境へのデプロイ、プロトコル進化（EIPライフサイクル、フォーク追跡、今後の変更予定）といったトピックを含みます。
xxyy-trade
このスキルは、ユーザーが「トークン購入」「トークン売却」「トークンスワップ」「暗号資産取引」「取引ステータス確認」「トランザクション照会」「トークンスキャン」「フィード」「チェーン監視」「トークン照会」「トークン詳細」「トークン安全性確認」「ウォレット一覧表示」「マイウォレット」「AIスキャン」「自動スキャン」「ツイートスキャン」「オンボーディング」「IP確認」「IPホワイトリスト」「トークン発行」「自動売却」「損切り」「利益確定」「トレーリングストップ」「保有者」「トップホルダー」「KOLホルダー」などをリクエストした場合、またはSolana/ETH/BSC/BaseチェーンでXXYYを経由した取引について言及した場合に使用します。XXYY Open APIを通じてオンチェーン取引とデータ照会を実現します。