Оптимизатор

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

Оптимизатор написан на языке Rust (и доступен как WASM) для мгновенной производительности.

Оптимизатор ищет $ и применяет преобразование, которое извлекает выражение, следующее за $, и превращает его в лениво загружаемый и импортируемый символ.

Для начала рассмотрим простой пример Counter:

export const Counter = component$(() => {
  const count = useSignal(0);
 
  return <button onClick$={() => count.value++}>{count.value}</button>;
});

Приведённый выше код представляет собой то, как разработчик пишет компонент. Ниже приведены преобразования, которые оптимизатор применяет к коду, чтобы сделать его пригодным для ленивой загрузки.

const Counter = component(qrl('./chunk-a.js', 'Counter_onMount'));

export const Counter_onMount = () => {
  const count = useSignal(0);
  return <button onClick$={qrl('./chunk-b.js', 'Counter_onClick', [count])}>{count.value}</button>;
};

const Counter_onClick = () => {
  const [count] = useLexicalScope();
  return count.value++;
};

Обратите внимание, что каждое появление $ приводит к появлению нового лениво загружаемого символа.

Сериализация

См. раздел Сериализация, в котором объясняется, что именно сериализуется.