@nuxtjs/partytown

Partytown 为 Nuxt 提供的集成

特性

👌 无需配置
🔥 将资源密集型脚本转移到 Web Worker 中
⚡️ 加快您的网站速度
💯 支持 Nuxt 3 和 Nuxt Bridge

快速设置

安装 @nuxtjs/partytown!

yarn add --dev @nuxtjs/partytown # or npm install --save-dev @nuxtjs/partytown

将其添加到 nuxt.config.ts 的 modules 部分

export default defineNuxtConfig({
  modules: ['@nuxtjs/partytown'],
})

在任何您希望由 Partytown 处理的脚本中添加 type: 'text/partytown' 属性。

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

配置

Partytown 支持许多选项，您可以在 nuxt.config.ts 文件中传递这些选项

export default defineNuxtConfig({
  // ...
  partytown: {
    /**
     * When `true`, Partytown scripts are not minified. See https://partytown.builder.io/configuration
     * on how to enable more logging.
     *
     * @default true in development
     */
    debug: boolean
    /**
     * Path (relative to your base URL) where the Partytown library should be served from.
     *
     * @default '~partytown'
     */
    lib: string
    // For other options, see https://partytown.builder.io/configuration
  },
})

配置示例

Crisp

export default defineNuxtConfig({
  modules: ['@nuxtjs/partytown'],
  partytown: {
    forward: ['$crisp', '$crisp.push'],
  },
  app: {
    head: {
      script: [
        // Insert your CRISP Script here e.g.:
        { innerHTML: 'window.$crisp = []; window.CRISP_WEBSITE_ID = "0000"' },
        { src: 'https://client.crisp.chat/l.js', async: true, type: 'text/partytown' },
      ],
    },
  },
})

Google Tag Manager

export default defineNuxtConfig({
  modules: ['@nuxtjs/partytown'],
  partytown: {
    forward: ['dataLayer.push'],
  },
  app: {
    head: {
      script: [
        // Insert your Google Tag Manager Script here
        { src: '-', async: true, type: 'text/partytown' },
      ],
    },
  },
})

Plausible Analytics

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

开发

运行 yarn prepare 以生成类型存根。
使用 yarn dev 在开发模式下启动playground。

许可

MIT 许可