章节28

优化第三方脚本

许多应用程序依赖于第三方 JavaScript 来包含不同类型的功能，例如分析、广告和客户支持小部件。然而，如果过早加载第三方编写的代码，可能会延迟页面内容的渲染并影响用户性能。

Next.js 提供了一个内置的 Script 组件，可以优化任何第三方脚本的加载，同时让开发者可以选择何时获取和执行它。

使用 Script 组件

使用常规 HTML，外部脚本需要手动添加到 next/head 中

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <script src="https://#/gtag/js?id=123" />
      </Head>
    </div>
  );
}

使用 Next.js Script 组件，您可以将其添加到组件中的任何位置，而无需使用 next/head

import Script from 'next/script';
 
function IndexPage() {
  return (
    <div>
      <Script
        strategy="afterInteractive"
        src="https://#/gtag/js?id=123"
      />
    </div>
  );
}

Script 组件引入了一个 strategy 属性，允许您决定何时获取和执行脚本以实现最佳加载。为了不 негативно 影响最大内容绘制 (LCP)，大多数第三方脚本应被延迟到页面所有内容加载完成后加载，可以在页面变为可交互后立即加载 (strategy="afterInteractive") 或在浏览器空闲时延迟加载 (strategy="lazyOnload")。

进一步阅读

Next.js：Script 组件
Next.js：`next/script` 的 API 参考

优化第三方脚本

使用 Script 组件

进一步阅读

您已完成本章节28