Qwikloader

Qwik предназначен для фрагментарной ленивой загрузки вашего приложения. Для достижения ленивой загрузки Qwik нуждается в крошечном фрагменте JavaScript-кода, который знает, как загружать остальную часть приложения по мере необходимости. Мы называем этот фрагмент JavaScript-кода Qwikloader.

Qwikloader:

Маленький: около 1 Кб (минифицированный);
Быстрый: он выполняется менее чем за 5 мс даже на мобильных устройствах (первоначальные затраты, а не затраты на каждое событие).

Как осуществляется доставка:

Из-за его размера мы рекомендуем вставлять Qwikloader в виде встроенного тега <script>. Тогда браузеру не придётся создавать ещё одно соединение с сервером.

Назначение Qwikloader:

Регистрировать глобальные события браузера;
Если происходит событие, выполняется поиск в DOM соответствующего атрибута события, указывающего на QRL для ленивой загрузки;
Ленивая загрузка обработчика события и его выполнение.

Как это работает

Ниже представлен простой HTML с Qwikloader и кнопка с соответствующим поведением.

<html>
  <body q:base="/build/">
    <button on:click="./myHandler.js#clickHandler">нажми меня</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 извлекает символ clickHandler, экспортированный из http://localhost/build/myHandler.js, и вызывает его.

События и Qwikloader

Регистрация слушателя создает две проблемы в контексте SSR/SSG, которые Qwik должен решить (для контекста вспомним, что Qwik возобновляемый, то есть он может продолжить выполнение приложения с того места, где сервер сделал паузу, без необходимости загружать и выполнять весь код).

местонахождение слушателя: Qwik должен знать, где в HTML находятся события, которые пришли из SSR/SSG.
код слушателя: Qwik необходимо знать, какой код должен быть выполнен при срабатывании события.

Без вышеуказанной информации Qwik будет вынужден загрузить шаблон компонента и выполнить его, чтобы можно было восстановить местоположение и замыкание слушателя. Этот процесс известен как гидратация, и Qwik пытается избежать гидратации.

Qwik сериализует слушателей событий в DOM в виде QRLs. Например:

<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-приложениям не нужно выполнять гидратацию при запуске.

Участники

Спасибо всем участникам, которые помогли сделать эту документацию лучше!