章节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")。

优化第三方脚本

使用 Script 组件

延伸阅读

您已完成本章28