脚本优化

应用程序脚本

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

pages/_app.js

import Script from 'next/script'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://example.com/script.js" />
    </>
  )
}

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

建议：我们建议仅在特定页面或布局中包含第三方脚本，以最大程度地减少对性能的任何不必要影响。

策略

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

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

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

将脚本卸载到 Web Worker（实验性）

警告：worker 策略尚未稳定，并且尚不适用于app 目录。谨慎使用。

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

此策略仍处于实验阶段，仅当在 next.config.js 中启用了 nextScriptWorkers 标志时才能使用

next.config.js

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。

pages/home.tsx

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

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

使用自定义 Partytown 配置

尽管worker策略无需任何额外配置即可工作，但 Partytown 支持使用配置对象来修改一些设置，包括启用debug模式以及转发事件和触发器。

如果您想添加其他配置选项，可以在自定义的_document.js中使用的<Head />组件内包含它。

_pages/document.jsx

import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head>
        <script
          data-partytown-config
          dangerouslySetInnerHTML={{
            __html: `
              partytown = {
                lib: "/_next/static/~partytown/",
                debug: true
              };
            `,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

为了修改 Partytown 的配置，必须满足以下条件：

必须使用data-partytown-config属性来覆盖 Next.js 使用的默认配置。
除非您决定将 Partytown 的库文件保存在单独的目录中，否则必须在配置对象中包含lib: "/_next/static/~partytown/"属性和值，以便让 Partytown 知道 Next.js 在哪里存储必要的静态文件。

注意：如果您正在使用资源前缀并希望修改 Partytown 的默认配置，则必须将其作为lib路径的一部分包含在内。

查看 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')`,
  }}
/>

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

执行其他代码

可以使用 Script 组件中的事件处理程序在特定事件发生后执行其他代码。

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

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

pages/index.tsx

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或自定义数据属性。包含任何其他属性都会自动将其转发到最终的优化<script>元素中，该元素包含在 HTML 中。

pages/index.tsx

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"
      />
    </>
  )
}