@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'], }) - 为任何您希望 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://#/l.js', async: true, type: 'text/partytown' },
],
},
},
})
Google 标签管理器
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以开发模式启动 playground。