static-import
ロード時に必要なモジュール依存関係を静的に読み込むための ES2015 の `import` 構文を解説します。静的解析やツリーシェイキングの恩恵を受けたい場合や、ロード時に必ず必要となるコードをインポートする際に使用してください。
description の原文を見る
Teaches static ES2015 import syntax for module dependencies. Use when you need to import code that is required at load time and benefits from static analysis and tree shaking.
SKILL.md 本文
Static Import
import キーワードを使うことで、別のモジュールによってエクスポートされたコードをインポートできます。デフォルトでは、静的にインポート しているすべてのモジュールが初期バンドルに追加されます。デフォルトの ES2015 インポート構文 import module from 'module' を使ってインポートされたモジュールは、静的にインポートされます。
例を見てみましょう。シンプルなチャットアプリには Chat コンポーネントが含まれており、ここで3つのコンポーネント（UserProfile、ChatList、メッセージを入力・送信するための ChatInput）を静的にインポートしてレンダリングしています。ChatInput モジュール内では、ユーザーが絵文字を切り替えた時に絵文字ピッカーを表示できるように、EmojiPicker コンポーネントを静的にインポートしています。
使用すべき場面
- ページロード時に必要なモジュールのインポートに使用する
- これはデフォルトのインポートメカニズムです。動的インポートに切り替える時期を判断するために理解しておくことが重要です
説明
- 初期レンダリングに重要なモジュールには静的インポートを使用する
- すべての静的にインポートされたモジュールが初期バンドルにバンドルされることに注意する
- 初期レンダリングで不要なモジュールについては、動的インポートへの切り替えを検討する
詳細
モジュールはエンジンがそれらをインポートしている行に到達するとすぐに実行されます。
コンポーネントが静的にインポートされたため、Webpack はモジュールを初期バンドルにバンドルしました。
Asset Size Chunks Chunk Names
main.bundle.js 1.5 MiB main [emitted] main
チャットアプリケーションのソースコードは1つのバンドル main.bundle.js にバンドルされます。大きなバンドルサイズは、ユーザーのデバイスとネットワーク接続によっては、アプリケーションのロード時間に大きな影響を与える可能性があります。App コンポーネントがその内容をユーザーの画面にレンダリングするまでに、まずすべてのモジュールをロードして解析する必要があります。
幸いなことに、ロード時間を短縮する方法はたくさんあります。すべてのモジュールを一度にインポートする必要はありません。この場合の EmojiPicker のように、ユーザーのインタラクションに基づいてのみレンダリングすべきモジュール、またはページ下部でレンダリングされるモジュールがあるかもしれません。すべてのコンポーネントを静的にインポートする代わりに、App コンポーネントが その内容をレンダリングした後、ユーザーがアプリケーションと対話できるようになった後に、モジュールを 動的に インポートできます。
ソース
ライセンス: 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を通じてオンチェーン取引とデータ照会を実現します。