Partytown

第三方腳本會因為阻塞主線程而大幅減慢您的初始頁面載入速度。

Partytown 是一個工具，它允許您使用 Web Worker 將第三方腳本（如 Google Analytics（分析）、Facebook Pixel 等）延遲到主線程之外。如要進一步了解此工具，請造訪 Partytown 文件。

用法

您可以使用以下 Qwik 入門腳本輕鬆新增 Partytown

npm run qwik add partytown

先前的指令會更新您的應用程式，並在 vite.config.ts 中設定正確的配置。

它也會將新檔案新增到您的 components 資料夾。

src/root.tsx

import { QwikPartytown } from './components/partytown/partytown';
 
export default component$(() => {
  return (
    <QwikCityProvider>
      <head>
        <meta charSet="utf-8" />
        <QwikPartytown forward={['gtag','dataLayer.push']} />
        <script
          async
          type="text/partytown"
          src="https://#/gtag/js?id=G-XXXXXXX"
        />
        <script
          type="text/partytown"
          dangerouslySetInnerHTML={`
            window.dataLayer = window.dataLayer || [];
            window.gtag = function() {
              dataLayer.push(arguments);
            }
            gtag('js', new Date());
            gtag('config', 'G-XXXXXX');
          `}
        />
      </head>
      <body lang="en"></body>
    </QwikCityProvider>
  );
});

進階

如需使用更多選項進一步設定 Partytown，請造訪 Partytown 文件

貢獻者

感謝所有協助改進此文件的貢獻者！