“追加コンポーネントは後で読み込み”：イベント駆動の遅延ハイドレーション

皆様こんばんは。株式会社ファストコーディングのフルスタックエンジニア　MrFireです。

つい最近、趣味のバイクツーリングのルートをインターネットで探していた時のことです。ページを開くと重くて、職業柄ネットワークタブを見てしまったりするんですが、やたらとたくさんのスクリプトが最初に読み込まれることに気づきました。その影響で、ルート情報を探すのに時間がかかってしまい、不便さを感じました。同じような経験をしたことがある方も多いのではないでしょうか。そんな問題を解決する方法の一つが「遅延ハイドレーション」です。今回はこの技術についてVue.jsのサンプルを用いて説明していきます。

＊ブログの書き出しを書くのって本当に難しいなって思います。でも嘘は書いてないですよ。。。本当に重たいページでした。

遅延ハイドレーションとは？

遅延ハイドレーションは、シンプルに言えば、JavaScriptファイル（やその中に定義されているオブジェクト）をの読み込みをPromiseを使って遅延して読み込ませることを意味します。今回サンプルでご紹介するVue.jsにおいては遅延ハイドレーションの記述方式もあり、コンポーネントを指定のタイミングで読み込ませることが簡単に出来ます。

https://ja.vuejs.org/guide/components/async#lazy-hydration

遅延ハイドレーションでは、初期表示時に本当に必要なものだけを読み込むことを目指します。よって遅延して読まれる要素は、何かしらのユーザーからのアクション、例えばページの表示領域に入った、マウス操作が生まれた等に初めて関連スクリプトを読み込みます。これにより、初回の操作で少しの遅延が発生するかもしれませんが、その後の操作はより快適になります。

初期状態はシンプルに

開始時点では、すべてのインタラクション要素を通常のリンクやシンプルなHTML要素として用意します。ユーザーが実際に利用するまで、余分なリソースを使わないようにします。この方法は、特にモーダルや検索ボックスなど、最初は表示されていない要素に適しています。

モジュールを動的に読み込む

今回のサンプルでは、ユーザー地図上のポインタをクリックすると、dynamic import()を使ってスクリプトを読み込んでいます。実際にはVueのdefineAsyncComponentを使います。どのタイミングで、を処理するコンポーネントもいろいろあるのですが、サンプルではhydrateOnVisibleを使って表示されたときに、遅延ハイドレーションをしています。

// 詳細パネルを遅延ハイドレーション
const AsyncPlaceDetail = defineAsyncComponent({
  loader: () => import('./components/PlaceDetail.vue'),
  hydrate: hydrateOnVisible({ rootMargin: '50px' })
})

ちなみにタイミングを制御するコンポーネントは以下のようにいくつかあります。また自作することも可能です。

• hydrateOnMediaQuery：メディアクエリーでハイドレート。指定されたメディアクエリーに一致したときにハイドレートします。
• hydrateOnInteraction：インタラクションでハイドレート。イベントを指定してそのイベントが発生したら、というタイミングで動作します。
• hydrateOnIdle：アイドル状態になったらハイドレード。タイムアウトの上限を指定することも可能です。

こちらがサンプルコードになります。サンプルコードではマップの詳細パネルのコンポーネント（ページの下の方に表示されます）は、ピンを押さないと読み込まないようにしています。なお、Vue.jsではSSRでなければ利用できませんのでご留意ください。

あと、今回初めて、StackBlitzを使ってみました。これとっても便利ですね。

現場での実践例

私たちの開発現場でも「もっとページの表示を速くしてほしい」というリクエストがあるときに、最初に考える技の一つが遅延処理だったりします。具体的な例として、ECサイトでよくみられる、商品カテゴリーの多層アコーディオンメニューに遅延ハイドレーションを使ったところ、初回表示の速度が約30%改善されました。ページスピードスコアの向上にもなるので、一石二鳥です。

おわりに

遅延ハイドレーションは、ユーザー体験を改善するための非常に効果的な方法です。実装の段階でアイデアとして考えておけば、組み込みはさほど難しくはありません。ただし、あまりに多くのコンポーネントやスクリプトを事前に読み込むと、読み込み時に画面がスタックしてしまうような逆効果になることもあるので注意が必要です。

株式会社ファストコーディングでは、こういったフロントエンド実装のコツをいろいろ経験していますので、お困りごとがあればぜひこちらのフォームからお問い合わせください。