dynamic-import
動的な`import()`を使ったオンデマンドのコード読み込みを支援するスキルです。起動時に不要なモジュールを遅延読み込みすることで初期バンドルサイズを削減したい場合に活用してください。
description の原文を見る
Teaches dynamic import() for on-demand code loading. Use when you need to reduce initial bundle size by lazily loading modules that aren't required at startup.
SKILL.md 本文
Dynamic Import
チャットアプリケーションには、4つの重要なコンポーネントがあります：UserInfo、ChatList、ChatInput、EmojiPickerです。しかし、初期ページロード時に即座に使用されるのは、UserInfo、ChatList、ChatInputの_3つ_のみです。EmojiPickerは直接表示されず、ユーザーがEmojiPickerを開くためにEmojiをクリックしない場合は、まったくレンダリングされないかもしれません。これは、EmojiPickerモジュールを初期バンドルに不必要に追加してしまい、ロード時間が増加する可能性があります！
これを解決するために、EmojiPickerコンポーネントを_動的にインポート_することができます。静的にインポートする代わりに、EmojiPickerを表示したいときだけインポートします。Reactで動的にコンポーネントをインポートする簡単な方法は、React Suspenseを使用することです。React.Suspenseコンポーネントは動的にロードされるべきコンポーネントを受け取り、EmojiPickerモジュールのインポートを一時停止することで、Appコンポーネントがより素早く内容をレンダリングできるようにします！
使用する場合
- ユーザーの操作や条件に基づいてのみ特定のモジュールが必要な場合に使用する
- 初期バンドルサイズを削減してページロードを高速化したい場合に有効
- モーダル、ピッカー、または重いライブラリなどのコンポーネントが初期レンダリング時に必要でない場合に使用する
手順
- Reactで動的なコンポーネントインポートに
React.lazyとSuspenseを使用する - 動的インポートされたモジュールがロード中に意味のあるフォールバックUIを提供する
- React SuspenseがサポートされていないSSRアプリケーションでは、
loadable-componentsを使用することを検討する - 初期レンダリングに不可欠でないモジュールのみを動的インポートする
詳細
EmojiPickerを不必要に初期バンドルに追加する代わりに、独自のバンドルに分割して、初期バンドルのサイズを削減することができます！
より小さい初期バンドルサイズは、より高速な初期ロードを意味します：ユーザーが空白のロード画面を見つめている時間が減ります。fallbackコンポーネントにより、アプリケーションがフリーズしていないことをユーザーに伝えることができます：単にモジュールが処理され実行されるのを少し待つだけです。
Asset Size Chunks Chunk Names
emoji-picker.bundle.js 1.48 KiB 1 [emitted] emoji-picker
main.bundle.js 1.33 MiB main [emitted] main
vendors~emoji-picker.bundle.js 171 KiB 2 [emitted] vendors~emoji-picker
以前は初期バンドルが1.5MiBでしたが、EmojiPickerのインポートを一時停止することで1.33 MiBに削減できました！
EmojiPickerコンポーネントを動的にインポートすることで、初期バンドルサイズを1.5MiBから1.33 MiBに削減することができました！ユーザーはEmojiPickerが完全にロードされるまでしばらく待つ必要があるかもしれませんが、アプリケーションがレンダリングされインタラクティブになった状態でユーザーがコンポーネントのロードを待つことができるようにして、ユーザー体験を向上させました。
Loadable Components
サーバーサイドレンダリングは（まだ）React Suspenseをサポートしていません。React Suspenseの良い代替案は、SSRアプリケーションで使用できるloadable-componentsライブラリです。
React Suspenseと同様に、遅延インポートされたモジュールをloadableに渡すことができます。これにより、EmojiPickerモジュールがリクエストされるときだけモジュールがインポートされます！モジュールがロード中の間、fallbackコンポーネントをレンダリングすることができます。
Loadable componentsはSSRアプリケーション向けのReact Suspenseの優れた代替案ですが、CSRアプリケーションでモジュールのインポートを一時停止するためにも有用です。
ソース
ライセンス: 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を通じてオンチェーン取引とデータ照会を実現します。