🧪 洞察

阶段： 原型设计

洞察允许您的应用程序收集真实用户使用信息，以优化捆绑包的创建。通过观察真实用户行为，Qwik 构建系统可以更好地为您的应用程序预取捆绑包。这有两个好处

通过注意到哪些符号一起使用，捆绑器可以将这些符号放在同一个捆绑包中，从而最大限度地减少由于需要下载太多小文件而可能发生的瀑布效应。
通过观察符号的使用顺序，预取器可以按优先级顺序获取捆绑包，确保最常使用的捆绑包首先加载。

架构

优化包含以下部分

一个 <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 洞察获取 PUBLIC_QWIK_INSIGHTS_KEY。

<Insights> 组件收集以下数据

符号的计时信息。
URL 的 pathname 部分。
随机 sessionID，用于标识哪些符号加载来自同一个浏览器会话。

注意：<Insights> 组件不会收集任何可识别用户的信息。

收集的信息将发送到 builder.io 数据库进行存储。

Vite 集成

当应用程序运行一段时间并收集到足够多的符号使用信息后，这些统计信息可用于改进应用程序未来版本的捆绑包。这可以通过将 vite 构建与洞察连接来实现，如下所示

文件：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>` 组件