Qwikloader

Qwik 专为应用程序的细粒度延迟加载而设计。为了实现延迟加载，Qwik 需要在开始时加载一小段 JavaScript，它知道如何根据需要下载应用程序的其余部分。我们将该 JavaScript 称为 Qwikloader。

Qwikloader 是:

很小: 大约 1 kb。
很快: 即使在移动设备上，它也可以在不到 5 毫秒的时间内执行。（初始成本，而不是每次事件成本。）

它怎么被传输:

由于它的大小，我们建议将 Qwikloader 作为内联的 <script> 标签提供。这样，浏览器就不必花费创建另一个与服务器的连接的成本。

Qwikloader的目的:

注册全局浏览器事件。
如果有事件发生, search the DOM for the corresponding event attribute pointing to the QRL to lazy-load.
延迟加载事件处理程序并执行它。

它的工作原理

您可以在下面找到一个带有 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。假设原始页面是从 http:localhost 提供的，那么获取 URL 将变为 http:localhost/build/myHandler.js。
Qwikloader 检索从 http:localhost/build/myHandler.js 导出的 clickHandler symbol并调用它。

Events 和 qwikloader

监听器的注册在 SSR/SSG 的上下文中产生了 Qwik 需要解决的两个问题。（关于上下文，请记住 Qwik 是可恢复的，也就是说，它可以从服务器暂停的地方继续执行应用程序，而不会被迫急切地下载和执行代码。）

listener location: Qwik 需要知道事件在来自 SSR/SSG 的 HTML 中的位置。
listener code: 如果事件被触发，Qwik 需要知道应该运行什么代码。

如果没有上述信息，Qwik 将被迫下载组件模板并执行它，以便恢复侦听器位置和关闭。这个过程被称为hydration，Qwik 明确地试图避免hydration。

Qwik 以 QRLs 的形式将事件监听器序列化为 DOM。例如：

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

需要注意的关键是 Qwik 生成了一个 on:click 属性，其中包含值 .chunk-a.jsCounter_button_onClick[0]。在上面的例子中，on:click 属性解决了监听器定位问题，属性值解决了监听器代码定位问题。通过将侦听器序列化为 HTML，Qwik 应用程序不需要在启动时执行hydration。