@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'],
})

將 type: 'text/partytown' 屬性添加到任何您希望由 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 許可證