🧪 Insights

Stage: prototyping

Insights allow your application to collect real user usage information to optimize the creation of bundles. By observing real user behavior, the Qwik build system can then do a better job of placing symbols, which are used together, into the same chunk, thus minimizing the waterfall effect that could occur if there are too many small files needing to be downloaded.

Architecture

The optimization consists of these parts:

A <Insights> component which collects real user usage data.
A hosted application with a database. (http://qwik-insights.builder.io)
a vite time plugin which provides the bundle information.

`<Insights>` component

The <Insights> component should be added to your root.tsx file.

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

You can get PUBLIC_QWIK_INSIGHTS_KEY by visiting https://qwik-insights.builder.io/ and creating an application.

The <Insights> component collects this data:

Timing information of symbols.
The pathname part of the URL.
Random sessionID which identifies which symbol loads came from the same browser session.

NOTE: The <Insights> component does not collect any user identifiable information.

The information collected is sent to https://qwik-insights.builder.io/ for storage.

Hosted application

https://qwik-insights.builder.io/ is hosted as part of Insights and it maintains statistical usage information on the application symbols. The implementation of the service is open-source, and you have the choice to use ours or host your own. (Please note, this may become a paid service in the future.)

Vite integration

Once the application is running for a while and it collects sufficient information on symbol usage, the stats can be used to improve the bundles of the future version of the application. This is done by connecting the vite build with Insights like so:

file: vite.config.js

//..
import { defineConfig, loadEnv } from 'vite';
import { Insights } from '@builder.io/qwik-labs';
 
 
export default defineConfig(async () => {
  return {
    plugins: [
      qwikVite({
        entryStrategy: await insightsEntryStrategy({
          publicApiKey: loadEnv('', '.').PUBLIC_QWIK_INSIGHT_KEY,
        }),
      }), 
      //...
    ],
    // ...
  };
});

Contributors

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