优化器
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++;
};
请注意,每个 $
的出现都会产生一个新的可懒加载的符号。
序列化
有关可序列化内容的讨论,请参见 serialization。