优化器

Qwik 的理念是尽可能延迟加载代码。为了做到这一点，Qwik 依赖于优化器来重新排列代码以实现延迟加载。优化器是一种代码级转换，它在 rollup 的一部分中运行。

优化器是用 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'));

chunk-a.js

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

chunk-b.js

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

请注意，$ 的每次出现都会导致一个新的可延迟加载的符号。

序列化

有关可序列化内容的讨论，请参阅序列化。

贡献者

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