優化器規則 | 進階 📚 Qwik 文件

Qwik 的理念是盡可能延遲程式碼載入。為此，Qwik 依賴優化器重新排列程式碼以進行延遲載入。優化器是一種程式碼層級轉換，作為 Rollup 的一部分運行。

優化器使用 Rust（並以 WASM 形式提供）編寫，可實現即時效能。

優化器會尋找 $ 並應用轉換，將 $ 後面的表達式提取出來，並將其轉換為可延遲載入和導入的符號。

讓我們先來看一個簡單的 計數器 範例

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++;
};

請注意，每次出現 $ 都會產生一個新的可延遲載入符號。

序列化

如需可序列化內容的討論，請參閱序列化。

貢獻者

感謝所有幫助改進這份文件的貢獻者！