Partytown 项目教程

1. 项目介绍

Partytown 是一个用于将资源密集型的第三方脚本迁移到 Web Worker 中的库。它的目标是帮助加速网站性能，通过将这些脚本从主线程中移除，从而减少主线程的负担。Partytown 的主要理念是主线程应该专用于你的代码，而任何不需要在关键路径上的脚本都应该被移到 Web Worker 中。

2. 项目快速启动

安装 Partytown

首先，你需要在你的项目中安装 Partytown。你可以使用 npm 或 yarn 来安装：

npm install @builder.io/partytown

或者

yarn add @builder.io/partytown

配置 Partytown

在你的项目配置文件中（例如 nuxt.config.ts），添加 Partytown 模块：

export default defineNuxtConfig({
  modules: ['@builder.io/partytown/nuxt'],
  partytown: {
    // 配置选项
    debug: true,
    lib: '~partytown'
  }
});

使用 Partytown

在你的模板文件中，将需要移到 Web Worker 的脚本标记为 type="text/partytown"：

<template>
  <div>
    <script type="text/partytown" src="https://example.com/analytics.js"></script>
  </div>
</template>

3. 应用案例和最佳实践

案例1：Google Tag Manager

在 Nuxt 项目中使用 Partytown 集成 Google Tag Manager：

export default defineNuxtConfig({
  modules: ['@builder.io/partytown/nuxt'],
  partytown: {
    forward: ['dataLayer.push']
  },
  app: {
    head: {
      script: [
        {
          src: 'https://www.googletagmanager.com/gtag/js?id=YOUR_GTM_ID',
          async: true,
          type: 'text/partytown'
        }
      ]
    }
  }
});

案例2：Plausible Analytics

在 Nuxt 项目中使用 Partytown 集成 Plausible Analytics：

export default defineNuxtConfig({
  modules: ['@builder.io/partytown/nuxt'],
  partytown: {
    forward: ['$plausible', '$plausible.push']
  },
  app: {
    head: {
      script: [
        {
          innerHTML: 'window.$plausible = []'
        },
        {
          src: 'https://plausible.io/js/script.js',
          defer: true,
          type: 'text/partytown',
          'data-domain': 'your-domain'
        }
      ]
    }
  }
});

4. 典型生态项目

Qwik

Qwik 是一个开源框架，旨在通过关注 HTML 的服务器端渲染的恢复性和代码的细粒度懒加载来实现最佳的交互时间。

Mitosis

Mitosis 是一个允许你编写一次组件并在多个框架（如 Vue、React、Solid、Angular、Svelte 等）中运行的工具。

Builder

Builder 是一个用于 React、Vue、Angular 等的拖放页面构建器和 CMS。