🧪 Insights

Stage: prototyping

Insights позволяет вашему приложению собирать информацию об использовании от реальных пользователей для оптимизации создания бандлов вашего приложения. Наблюдая за поведением реальных пользователей, система сборки Qwik может лучше справляться с предварительной выборкой бандлов для вашего приложения. Это дает два преимущества:

Увидев, какие символы используются совместно, компоновщик может разместить их в одном бандле, минимизируя эффект водопада, который может возникнуть при загрузке слишком большого количества небольших файлов.
Наблюдая за тем, в каком порядке используются символы, система предварительной загрузки будет получать пакеты в порядке приоритета, гарантируя, что бандлы, которые используются чаще, будут загружены первыми.

Архитектура

Оптимизация состоит из следующих частей:

Компонент <Insights>, который собирает реальные данные об использовании от пользователей;
Зарегистрированное приложение в базе данных builder.io;
Vite-плагин qwikInsights для загрузки и сохранения реальных данных об использовании от пользователя в процессе сборки.

ПРИМЕЧАНИЕ: Чтобы попробовать новую функцию, пожалуйста, напишите сообщение в Qwik Discord server В настоящее время информация 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>
  );
});

Получить PUBLIC_QWIK_INSIGHTS_KEY можно на сайте Qwik Insight.

Компонент <Insights> собирает следующие данные:

Информация времени у символов;
Часть URL-адреса, содержащая pathname;
Случайный идентификатор сессии, который определяет, какие символы загружены из одной и той же сессии браузера.

ПРИМЕЧАНИЕ: Компонент <Insights> не собирает никакой идентифицирующей пользователя информации.

Собранная информация отправляется в базу данных builder.io для хранения.

Интеграция Vite

Когда приложение работает некоторое время и собирает достаточно информации об использовании символов, статистику можно использовать для улучшения сборки бандлов будущей версии приложения. Это делается путём соединения сборки Vite с Insights следующим образом:

file: 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

Архитектура

Компонент <Insights>

Интеграция Vite

Участники

Компонент `<Insights>`