如何加载和优化脚本

布局脚本

要为多个路由加载第三方脚本，请导入 next/script 并将脚本直接包含在您的布局组件中

import Script from 'next/script'
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <section>{children}</section>
      <Script src="https://example.com/script.js" />
    </>
  )
}

当用户访问文件夹路由（例如 dashboard/page.js）或任何嵌套路由（例如 dashboard/settings/page.js）时，将获取第三方脚本。Next.js 将确保脚本**只加载一次**，即使用户在同一布局中的多个路由之间导航。

应用程序脚本

要为所有路由加载第三方脚本，请导入 next/script 并将脚本直接包含在您的根布局中

import Script from 'next/script'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script src="https://example.com/script.js" />
    </html>
  )
}

当应用程序中的**任何**路由被访问时，此脚本将被加载并执行。Next.js 将确保脚本**只加载一次**，即使用户在多个页面之间导航。

建议：我们建议只在特定页面或布局中包含第三方脚本，以尽量减少对性能的不必要影响。

策略

虽然 next/script 的默认行为允许您在任何页面或布局中加载第三方脚本，但您可以通过使用 strategy 属性来微调其加载行为

beforeInteractive：在任何 Next.js 代码之前和任何页面水合之前加载脚本。
afterInteractive：（**默认**）尽早加载脚本，但在页面上发生一些水合后。
lazyOnload：在浏览器空闲时间晚些时候加载脚本。
worker：（实验性）在 Web Worker 中加载脚本。

请参阅 next/script API 参考文档，了解有关每个策略及其用例的更多信息。

将脚本卸载到 Web Worker (实验性)

警告： worker 策略尚不稳定，并且尚不支持 App Router。请谨慎使用。

使用 worker 策略的脚本将通过 Partytown 卸载并在 Web Worker 中执行。通过将主线程专门用于应用程序的其余代码，这可以提高站点的性能。

此策略仍处于实验阶段，并且只有在 next.config.js 中启用 nextScriptWorkers 标志时才能使用

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

然后，运行 next（通常是 npm run dev 或 yarn dev），Next.js 将引导您完成所需软件包的安装以完成设置

npm run dev

您将看到类似以下的说明：请通过运行 npm install @builder.io/partytown 安装 Partytown

设置完成后，定义 strategy="worker" 将自动在您的应用程序中实例化 Partytown，并将脚本卸载到 Web Worker。

import Script from 'next/script'
 
export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  )
}

在 Web Worker 中加载第三方脚本时，需要考虑许多权衡。有关更多信息，请参阅 Partytown 的权衡文档。

内联脚本

内联脚本（或未从外部文件加载的脚本）也受 Script 组件支持。它们可以通过将 JavaScript 放在大括号中来编写

<Script id="show-banner">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

或者使用 dangerouslySetInnerHTML 属性

<Script
  id="show-banner"
  dangerouslySetInnerHTML={{
    __html: `document.getElementById('banner').classList.remove('hidden')`,
  }}
/>

警告：必须为内联脚本分配 id 属性，以便 Next.js 跟踪和优化脚本。

执行额外代码

事件处理程序可以与 Script 组件一起使用，以便在某个事件发生后执行额外的代码

onLoad：脚本加载完成后执行代码。
onReady：脚本加载完成后，以及每次组件挂载时执行代码。
onError：如果脚本加载失败，则执行代码。

这些处理程序仅在导入 next/script 并将其用于客户端组件内部时才有效，其中 "use client" 被定义为代码的第一行

'use client'
 
import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onLoad={() => {
          console.log('Script has loaded')
        }}
      />
    </>
  )
}

请参阅 next/script API 参考，了解有关每个事件处理程序的更多信息并查看示例。

额外属性

有许多 DOM 属性可以分配给 <script> 元素，这些属性未被 Script 组件使用，例如 nonce 或自定义数据属性。包含任何额外属性将自动将其转发到 HTML 中包含的最终优化 <script> 元素。

import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        id="example-script"
        nonce="XUENAJFW"
        data-test="script"
      />
    </>
  )
}

API 参考

了解有关 next/script API 的更多信息。

脚本组件

使用内置的 `next/script` 组件优化您的 Next.js 应用程序中的第三方脚本。