Qwikloader

Qwik 旨在对您的应用程序进行细粒度的延迟加载。为了实现延迟加载，Qwik 需要在开始时加载一小段 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。假设原始页面是从 http://localhost/ 提供的，则获取 URL 变成 http://localhost/build/myHandler.js。
Qwikloader 检索从 http://localhost/build/myHandler.js 导出的 clickHandler 符号并调用它。

事件和 Qwikloader

监听器的注册在 SSR/SSG 的上下文中产生了两个问题，Qwik 需要解决。（为了便于理解，请记住 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 应用程序无需在启动时执行水合。

贡献者

感谢所有帮助改进本文档的贡献者！