mcpField
I
import-on-visibility

import-on-visibility

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

import-on-visibility について

import-on-visibilityは、コンポーネントがビューポートに入ってからモジュールを読み込むフロントエンドの手法を解説するガイドです。初期ロードを抑えたい開発者向けに、適用場面や制約、読み込み中の表示方法を説明します。

主な機能

  1. 01表示時にコンポーネントを読み込み
  2. 02IntersectionObserverの利用
  3. 03可視性読み込みライブラリの利用
  4. 04モジュール読み込み中の代替表示
  5. 05不適切な適用場面の説明

活用シーン

  1. 01画面下部のコンポーネントを遅延読み込み
  2. 02スクロール時に画像やウィジェットを読み込み
  3. 03ページの初期ロードを軽減

インストール

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

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

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

詳細

表示時にインポート

ユーザー操作だけでなく、初期ページでは表示されないコンポーネントを使うこともよくあります。たとえば、ビューポート内に直接表示されていない画像を遅延読み込みし、ユーザーが下にスクロールしたときに読み込む方法があります。

すべての画像をすぐにリクエストしないことで、初期読み込み時間を短縮できます。コンポーネントにも同じ方法を使えます。コンポーネントが現在ビューポート内にあるかどうかを確認するには、IntersectionObserver APIを使うか、react-lazyloadやreact-loadable-visibilityなどのライブラリを使って、アプリケーションに表示時のインポートを手早く追加できます。

使用する場面

  • 初期ページでは表示されないコンポーネント（例：スクロールしないと見えないコンテンツ）に使用します
  • ユーザーのスクロールに合わせて画像、ウィジェット、または負荷の高いコンポーネントを遅延読み込みするのに便利です

使用しない場面

  • すぐにレンダリングする必要があるファーストビューのコンテンツでは使用しません。読み込みを遅らせると、目に見えるレイアウトシフトが発生し、LCP が遅くなります
  • 遅延読み込みによるオーバーヘッドが、削減できる負荷を上回るほど軽量なコンポーネントでは使用しません
  • SEO にとって重要で、初期 HTML に含める必要があるコンテンツでは使用しません

手順

  • IntersectionObserver API を使って、コンポーネントがビューポートに入ったことを検知します
  • 手早く実装するには、react-lazyloadやreact-loadable-visibilityなどのライブラリを使います
  • モジュールの読み込み中に表示するローディング用のフォールバックコンポーネントを用意します

詳細

コンポーネントが画面にレンダリングされると、react-loadable-visibilityはその要素が画面に表示される状態かどうかを検知します。その後、モジュールのインポートを開始し、その間はユーザーにローディング用コンポーネントを表示します。

このフォールバックコンポーネントにより、アプリケーションがフリーズしたわけではないことをユーザーに伝えられます。モジュールの読み込み、解析、コンパイル、実行が完了するまで、少し待つだけです。

ソース

コメント

Markdown 対応