Qwikloader

Qwik旨在实现应用程序的细粒度懒加载。为了实现懒加载，Qwik需要在开始时加载一个小的JavaScript片段，该片段知道如何根据需要下载应用程序的其余部分。我们将这个JavaScript称为Qwikloader。

Qwikloader具有以下特点：

小巧：大约1KB的最小化文件。
快速：即使在移动设备上，它的执行时间也不超过5毫秒。（初始成本，而不是每个事件的成本。）

交付方式：

由于其大小，我们建议将Qwikloader以内联的<script>标签形式交付。这样，浏览器就不必付出创建另一个与服务器的连接的成本。

Qwikloader的目的：

注册全局浏览器事件。
如果发生事件，搜索DOM以查找指向应该进行懒加载的QRL的相应事件属性。
懒加载事件处理程序并执行它。

它是如何工作的

下面是一个包含Qwikloader和一个带有关联行为的按钮的简单HTML示例。

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

浏览器下载HTML并执行内联的Qwikloader脚本。Qwikloader为所有浏览器事件设置全局监听器。
用户点击<button>。浏览器生成一个冒泡到DOM的click事件，直到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将被迫下载组件模板并执行它，以便可以恢复监听器位置和闭包。这个过程被称为hydration，而Qwik明确尝试避免hydration。

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

<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应用程序在启动时无需执行hydration。

Contributors

Thanks to all the contributors who have helped make this documentation better!