このWebサイトの検索機能に必要なスクリプトは、検索バーがフォーカスされている場合にのみ読み込まれます。 このように、それらは検索機能を使用することを決定した人々のためにのみロードされ、帯域幅とページの重みを大幅に減らすことができます。 結局、訪問者のごく一部しか検索を使用しないのに、なぜ毎回費用がかかるのでしょうか。

この単純な遅延読み込み手法を実現するために、最初にloadScriptと呼ぶ関数を定義しましょう。

function loadScript(url) {
  let isLoaded = document.querySelectorAll('.search-script');
  if(isLoaded.length > 0) {
    return;
  }

  let myScript = document.createElement("script");
  myScript.src = url;
  myScript.className = 'search-script';
  document.body.appendChild(myScript);
}

この関数は、最初にスクリプトがすでにロードされているかどうかをチェックします。ロードされている場合は、スクリプトを複数回ロードしようとするのではなく、単に戻ります。 次に、document.createElementを使用してスクリプト要素を作成し、渡されたURLを src 属性の値として指定し、チェックが機能するようにクラス名を指定してから、これを追加します。新しいscript要素をbody要素に追加します。


最後のステップは、検索入力でイベントリスナーを設定し、スクリプトへのURLを使用してloadScript関数を呼び出すことです。

var searchInput = document.querySelector('.algolia__input');
searchInput.addEventListener('focus', function(e) {
  loadScript('/path/to/search-script.js');
});

明らかに、これは、理論的には、検索ボックスにフォーカスしてからスクリプトを使用できるようになるまでに短い遅延があることを意味します。 ほとんどの場合、問題はありません。この場合、スクリプトが完全にロードされるとすぐにリアルタイム検索が開始されます。