🧪 インサイト

段階: プロトタイピング

インサイトを使用すると、アプリケーションは実際のユーザー使用情報を収集して、バンドルの作成を最適化できます。実際のユーザーの行動を観察することにより、Qwikビルドシステムはアプリケーションのバンドルをプリフェッチする処理を改善できます。これには2つの利点があります

どのシンボルが一緒に使用されているかを認識することにより、バンドラはシンボルを同じバンドルに配置して、ダウンロードが必要な小さなファイルが多すぎる場合に発生する可能性のあるウォーターフォールを最小限に抑えることができます。
シンボルが使用される順序を観察することにより、プリフェッチャーは優先順位でバンドルをフェッチし、より頻繁に使用されるバンドルが最初にロードされるようにすることができます。

アーキテクチャ

最適化はこれらの部分で構成されています

実際のユーザー使用状況データを収集する<Insights>コンポーネント。
builder.ioデータベース内に登録されたアプリケーション。
ビルドプロセス中に実際のユーザー使用状況データを読み込んで保存するqwikInsights Viteプラグイン。

注：この新機能を試すには、Qwik Discordサーバーにメッセージをドロップしてください。現在、インサイト情報はBuilderデータベースでホストされています。この情報は、アプリケーションでのシンボル/チャンクの実行に関するものです。サービスの実装はオープンソースであり、当社のサービスを使用するか、独自のサービスをホストするかを選択できます。（これは、将来的に有料サービスになる可能性があることに注意してください。）

`<Insights>`コンポーネント

<Insights>コンポーネントは、root.tsxファイルに追加する必要があります。

// ...
import { Insights } from '@builder.io/qwik-labs';
 
export default component$(() => {
  // ...
  return (
    <QwikCityProvider>
      <head>
        // ...
        <Insights
          publicApiKey={import.meta.env.PUBLIC_QWIK_INSIGHTS_KEY}
        />
      </head>
      <body lang="en">
        // ...
      </body>
    </QwikCityProvider>
  );
});

Qwik Insightにアクセスして、PUBLIC_QWIK_INSIGHTS_KEYを取得できます。

<Insights>コンポーネントはこのデータを収集します

シンボルのタイミング情報。
URLのpathname部分。
どのシンボルロードが同じブラウザセッションからのものであるかを識別するランダムなsessionID。

注：<Insights>コンポーネントは、ユーザーを特定できる情報を収集しません。

収集された情報は、ストレージのためにbuilder.ioデータベースに送信されます。

Vite統合

アプリケーションがしばらくの間実行され、シンボルの使用状況に関する十分な情報が収集されると、統計を使用してアプリケーションの将来のバージョンのバンドルを改善できます。これは、次のようにviteビルドをInsightsに接続することによって行われます

ファイル：vite.config.js

//..
import { defineConfig, loadEnv } from 'vite';
import { qwikInsights } from '@builder.io/qwik-labs/vite';
 
export default defineConfig(async () => {
  return {
    plugins: [
      qwikInsights({
        publicApiKey: loadEnv('', '.', '').PUBLIC_QWIK_INSIGHTS_KEY,
      }),
      //...
    ],
    // ...
  };
});

貢献者

このドキュメントの改善に貢献してくれたすべての貢献者に感謝します！

🧪 インサイト

アーキテクチャ

<Insights>コンポーネント

Vite統合

貢献者

`<Insights>`コンポーネント