Menu

如何加载和优化脚本

应用脚本

要为所有路由加载第三方脚本,导入 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 Router。请谨慎使用。

使用 worker 策略的脚本会被卸载并在带有 Partytown 的 web worker 中执行。这可以通过将主线程专用于应用程序代码的其余部分来提高网站性能。

这种策略仍处于实验阶段,只有在 next.config.js 中启用 nextScriptWorkers 标志时才能使用:

next.config.js
module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

然后,运行 next(通常是 npm run devyarn dev),Next.js 将指导你安装完成设置所需的包:

Terminal
npm run dev

你将看到类似这样的指示:请通过运行 npm install @builder.io/partytown 安装 Partytown

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

pages/home.tsx
TypeScript
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 的配置,必须满足以下条件:

  1. 必须使用 data-partytown-config 属性以覆盖 Next.js 使用的默认配置
  2. 除非你决定将 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')`,
  }}
/>

警告:内联脚本必须分配一个 id 属性,以便 Next.js 能够跟踪和优化脚本。

执行额外代码

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

  • onLoad:脚本加载完成后执行代码。
  • onReady:脚本加载完成后和每次组件挂载时执行代码。
  • onError:脚本加载失败时执行代码。

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

pages/index.tsx
TypeScript
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 参考,了解每个事件处理程序的更多信息并查看示例。

其他属性

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

pages/index.tsx
TypeScript
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"
      />
    </>
  )
}