Qwikloader

Qwikは、アプリケーションのきめ細かい遅延読み込みのために設計されています。遅延読み込みを実現するために、Qwikは、必要に応じてアプリケーションの残りの部分をダウンロードする方法を知る、ごく小さなJavaScriptを最初に読み込む必要があります。このJavaScriptをQwikloaderと呼びます。

Qwikloaderは

小さい：約1KB（圧縮後）。
高速：モバイルデバイスでも5ms未満で実行されます。（初期コストであり、イベントごとのコストではありません。）

配信方法

そのサイズが小さいため、インラインの<script>タグでQwikloaderを配信することをお勧めします。これにより、ブラウザはサーバーへの別の接続を作成するコストを支払う必要がなくなります。

Qwikloaderの目的

グローバルブラウザイベントを登録する。
イベントが発生した場合、遅延読み込みする必要があるQRLを指す対応するイベント属性についてDOMを検索する。
イベントハンドラーを遅延読み込みし、実行する。

動作原理

以下に、Qwikloaderと関連する動作を持つボタンを含む簡単なHTMLを示します。

<html>
  <body q:base="/build/">
    <button on:click="./myHandler.js#clickHandler">push me</button>
    <script>
      /* Qwikloader */
    </script>
  </body>
</html>

ブラウザはHTMLをダウンロードし、インラインのQwikloaderスクリプトを実行します。Qwikloaderは、すべてのブラウザイベントのグローバルリスナーを設定します。
ユーザーが<button>をクリックします。ブラウザは、QwikloaderのグローバルリスナーがそれをインターセプトするまでDOMをバブルアップするclickイベントを生成します。
Qwikloaderはイベントパスをたどり、要素のon:click属性を検索します。
Qwikloaderは、on:click属性とq:base属性、およびdocument.baseURIを使用して、遅延読み込みされたハンドラーを取得するための完全なURLを構築します。元のページがhttp://localhost/から提供されたとすると、フェッチURLはhttp://localhost/build/myHandler.jsになります。
Qwikloaderは、http://localhost/build/myHandler.jsからエクスポートされたclickHandlerシンボルを取得し、それを呼び出します。

イベントとQwikloader

リスナーの登録は、Qwikが解決する必要があるSSR/SSGのコンテキストで2つの問題を引き起こします。（コンテキストとして、Qwikは再開可能であることを覚えておいてください。つまり、コードをeagerにダウンロードして実行することを強制されることなく、サーバーが一時停止した場所からアプリケーションの実行を継続できます。）

**リスナーの位置**：Qwikは、SSR/SSGから取得されたHTML内のイベントの位置を知る必要があります。
**リスナーコード**：Qwikは、イベントがトリガーされた場合に実行するコードを知る必要があります。

上記の情報を提供しないと、Qwikはコンポーネントテンプレートをダウンロードして実行し、リスナーの位置とクロージャを回復する必要があります。このプロセスはハイドレーションと呼ばれ、Qwikは明示的にハイドレーションを回避しようとします。

Qwikは、QRLの形式でイベントリスナーをDOMにシリアル化します。例えば

<div>
  <button on:click="./chunk-a.js#Counter_button_onClick[0]">0</button>
</div>

重要なのは、Qwikが./chunk-a.js#Counter_button_onClick[0]という値を含むon:click属性を生成したことである。上記の例では、on:click属性はリスナーの位置の問題を解決し、属性値はリスナーコードの問題を解決します。リスナーをHTMLにシリアル化することにより、Qwikアプリケーションは起動時にハイドレーションを実行する必要がなくなります。

貢献者

このドキュメントをより良くするために貢献してくれたすべての貢献者に感謝します！