プログレッシブ

プログレッシブとは、アプリケーションのニーズに応じてコードをダウンロードすることで、コードベース全体をむやみにダウンロードしないことです。

これは、JavaScript の**読み込み**と実行を可能な限り遅らせることに重点を置いた Qwik のコア原則につながります。Qwik は、それを実現するためにアプリケーションを多くの遅延ロード可能なチャンクに分割する必要があります。

解決策

Qwik のアーキテクチャは、最新のツールを最大限に活用して、エントリポイント生成の問題を自動化します。開発者は通常どおりコンポーネントを記述できますが、Qwik オプティマイザーはコンポーネントをチャンクに分割し、必要に応じてダウンロードします。

さらに、フレームワークのランタイムは、コンポーネントがレンダリングツリーの一部である場合でも、インタラクティビティに必要ないコードをダウンロードする必要はありません。

オプティマイザー

オプティマイザーは、関数をトップレベルのインポート可能なシンボルに抽出するコード変換であり、Qwik ランタイムは必要に応じて JavaScript を遅延ロードできます。

オプティマイザーと Qwik ランタイムは連携して、細粒度の遅延ロードという望ましい結果を達成します。

オプティマイザーがない場合、次のいずれかになります。

コードは、インポート可能な部分に開発者が分割する必要がありました。これは、アプリケーションを作成する上で不自然であり、DX が悪くなります。
遅延ロードされた境界がないため、アプリケーションは多くの不要なコードをロードする必要がありました。

Qwik ランタイムは、オプティマイザーの出力を理解する必要があります。ここで理解する必要があるのは、コンポーネントを遅延ロード可能なチャンクに分割することにより、遅延ロードの要件がフレームワークに非同期コードを導入することです。フレームワークは、非同期性を考慮に入れるために異なる方法で記述する必要があります。既存のフレームワークは、すべてのコードが同期的に使用可能であると想定しています。この仮定により、既存のフレームワークに遅延ロードを簡単に挿入することができません。（たとえば、新しいコンポーネントが作成されると、フレームワークはその初期化コードが同期的に呼び出すことができると想定します。これがコンポーネントが初めて参照される場合、そのコードを遅延ロードする必要があるため、フレームワークはそれを考慮に入れる必要があります）。

遅延ロード

遅延ロードは非同期です。Qwikは非同期フレームワークです。Qwikは、いつでもコールバックへの参照がない可能性があり、そのため、遅延ロードする必要があることを理解しています。（対照的に、既存のほとんどのフレームワークは、すべてのコードが同期的に利用可能であると想定しているため、遅延ロードは簡単ではありません）。

Qwikでは、すべてが遅延ロード可能です。

コンポーネントのレンダリング時 - 初期化ブロックとレンダリングブロック
コンポーネントのタスク - 副作用、入力が変更された場合にのみダウンロード
リスナー - インタラクション時にのみダウンロード
スタイル - サーバーがまだ提供していない場合にのみダウンロード

遅延ロードはフレームワークのコアプロパティであり、後付けではありません。

オプティマイザーと`$`

この例をもう一度見てください。

// the `$` suffix for `component` indicates that the component should be
// lazy-loaded.
export const Counter = component$(() => {
  const count = useSignal(0);
 
  // the `$` suffix for `onClick` indicates that the implementation for
  // the handler should be lazy-loaded.
  return <button onClick$={() => count.value++}>{count.value}</button>;
});