🧪 洞察

阶段： 原型制作

洞察功能允许您的应用收集真实用户的使用信息，以优化包的创建。通过观察真实用户行为，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 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,
      }),
      //...
    ],
    // ...
  };
});

Contributors

Thanks to all the contributors who have helped make this documentation better!

🧪 洞察

架构

<Insights> 组件

Vite 集成

Contributors

`<Insights>` 组件