mcpField
D
dynamic-import

dynamic-import

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

dynamic-import について

Reactコンポーネントを必要な時点まで読み込まない方法を解説する開発スキルです。初期表示を最適化する開発者向けに、React.lazy、Suspense、読み込み中の表示、SSR向けの代替手段を扱います。

主な機能

  1. 01Reactコンポーネントの遅延読み込み
  2. 02React.lazyとSuspenseの利用
  3. 03読み込み中のフォールバック表示
  4. 04SSRでのloadable-components利用

活用シーン

  1. 01操作時だけ使うコンポーネントを初期バンドルから除外
  2. 02モーダルやピッカーの初期読み込みを軽減
  3. 03必要に応じて非重要モジュールを読み込み

インストール

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

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

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

詳細

動的インポート

チャットアプリケーションには、UserInfo、ChatList、ChatInput、EmojiPickerという4つの主要なコンポーネントがあります。ただし、初回のページ読み込み時にすぐ使われるのは、そのうちの_3つ_だけです。UserInfo、ChatList、ChatInputです。EmojiPickerは直接表示されるわけではなく、ユーザーがEmojiをクリックしてEmojiPickerを切り替えることがなければ、まったくレンダリングされない可能性もあります。つまり、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アプリケーションでも役立ちます。

ソース

コメント

Markdown 対応