@nuxtjs/partytown
功能
- 👌 無需配置
- 🔥 將資源密集型指令碼轉移到 Web Worker 中
- ⚡️ 加快您的網站速度
- 💯 支援 Nuxt 3 和 Nuxt Bridge
快速設定
- 安裝
@nuxtjs/partytown！npx nuxi@latest module add 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://#/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://#/js/script.js',
defer: true,
type: 'text/partytown',
'data-domain': 'your-domains',
},
],
},
},
})
開發
- 執行
yarn prepare以生成型別存根。 - 使用
yarn dev以開發模式啟動演示環境。