🧪 深入解析

階段： 原型設計

深入解析讓您的應用程式可以收集真實使用者的使用資訊，以優化套件的建立。透過觀察真實使用者的行為，Qwik 建置系統可以更好地為您的應用程式預先載入套件。這有兩個好處

通過注意哪些符號一起使用，打包器可以將符號放在同一個包中，從而最大程度地減少如果需要下載太多小文件而可能出現的瀑布效應。
通過觀察符號的使用順序，預取器可以按照優先順序獲取包，確保更頻繁使用的包首先加載。

架構

優化由以下部分組成

一個收集真實用戶使用數據的 <Insights> 組件。
builder.io 數據庫中的一個註冊應用程序。
一個 qwikInsights Vite 插件，用於在構建過程中加載和保存真實用戶使用數據。

注意：要試用此新功能，請在 Qwik Discord 伺服器中留言。目前，Insights 信息託管在 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>` 組件