Qwikloader

Qwik is designed for fine-grained lazy loading of your application. To achieve lazy-loading, Qwik requires a tiny piece of JavaScript to load at the beginning that knows how to download the rest of the application on an as-needed basis. We refer to that JavaScript as Qwikloader.

Qwikloader is:

small: about 1 kb minified.
fast: it executes in less than 5ms even on mobile devices. (Initial cost, not per event cost.)

How is it delivered:

Because of its size, we recommend delivering Qwikloader as inlined <script> tag. This way, the browser does not have to pay for the cost of creating another connection to the server.

What is the purpose of Qwikloader:

register global browser events.
if an event occurs, search the DOM for the corresponding event attribute pointing to the QRL to lazy-load.
Lazy-load the event handler and execute it.

How does it work

Below you can find a simple HTML with Qwikloader and a button with associated behavior.

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

The browser downloads the HTML and executes the inlined Qwikloader script. The Qwikloader sets up global listeners for all browser events.
The user clicks on the <button>. The browser generates a click event that bubbles up the DOM until the Qwikloader's global listener intercepts it.
The Qwikloader retraces the event path and searches for onClickQrl attribute on the elements.
The Qwikloader uses the onClickQrl and q:base attributes along with the document.baseURI to build a full URL for fetching the lazy-loaded handler. Assuming the original page was served up from http://localhost/ the fetch URL becomes http://localhost/build/myHandler.js.
Qwikloader retrieves the clickHandler symbol, exported from http://localhost/build/myHandler.js and invokes it.