Qwikloader

Qwik 旨在為您的應用程式提供細粒度的延遲載入。為了實現延遲載入，Qwik 需要在開始時載入一小段 JavaScript，該 JavaScript 知道如何在需要時下載應用程式的其餘部分。我們將該 JavaScript 稱為 Qwikloader。

Qwikloader 是

輕量級：最小化後約 1 kb。
快速：即使在行動裝置上，執行速度也低於 5 毫秒。（這是初始成本，而非每次事件的成本。）

如何傳遞

由於其大小，我們建議在內嵌的 <script> 標籤中傳遞 Qwikloader。這樣，瀏覽器就不必為了建立與伺服器的另一個連線而付出成本。

Qwikloader 的用途

註冊全域瀏覽器事件。
如果發生事件，搜尋 DOM 中指向應懶載入之 QRL 的對應事件屬性。
懶載入事件處理常式並執行它。

它是如何運作的

您可以在下方找到包含 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>。瀏覽器會產生一個 click 事件，該事件會沿著 DOM 向上冒泡，直到 Qwikloader 的全域監聽器攔截它為止。
Qwikloader 會回溯事件路徑並在元素上搜尋 on:click 屬性。
Qwikloader 使用 on:click 和 q:base 屬性以及 document.baseURI 來建立用於擷取懶載入處理常式的完整 URL。假設原始頁面是從 https://#/ 提供的，則擷取 URL 將變為 https://#/build/myHandler.js。
Qwikloader 會擷取從 https://#/build/myHandler.js 匯出的 clickHandler 符號並叫用它。

事件和 Qwikloader

在 Qwik 需要解決的 SSR/SSG 上下文中，監聽器的註冊會產生兩個問題。（就上下文而言，請記住 Qwik 是可恢復的，也就是說，它可以從伺服器暫停的位置繼續執行應用程序，而不必強制急切地下載和執行程式碼。）

監聽器位置：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 生成了一個 on:click 屬性，其中包含值 ./chunk-a.js#Counter_button_onClick[0]。在上面的例子中，on:click 屬性解決了監聽器位置問題，而屬性值解決了監聽器程式碼問題。通過將監聽器序列化到 HTML 中，Qwik 應用程序在啟動時不需要執行水合作用。

貢獻者

感謝所有幫助改進此文檔的貢獻者！