章节14

第三方 JavaScript

第三方 JavaScript 指的是从第三方来源添加的任何脚本。通常，包含第三方脚本是为了在网站中引入新的功能，而这些功能不需要从头开始编写，例如分析、广告和客户支持小部件。

添加第三方 JavaScript

让我们深入了解如何将第三方脚本添加到 Next.js 页面。

在编辑器中打开 pages/posts/first-post.js 并找到以下行

<Head>
  <title>First Post</title>
</Head>

除了元数据之外，需要尽快加载和执行的脚本通常添加到页面的 <head> 中。使用常规 HTML <script> 元素，外部脚本将按如下方式添加

<Head>
  <title>First Post</title>
  <script src="https://#/en_US/sdk.js" />
</Head>

此脚本包含 Facebook SDK，它通常用于引入 Facebook 社交插件和其他功能。虽然这种方法有效，但以这种方式包含脚本并不能清楚地说明它相对于在同一页面上获取的其他 JavaScript 代码何时加载。如果某个脚本是渲染阻塞的，并且可能延迟页面内容的加载，则可能会严重影响性能。

使用 Script 组件

next/script 是 HTML <script> 元素的扩展，并优化了何时获取和执行其他脚本。

在同一文件中，在文件开头添加从 next/script 导入 Script 的语句

import Script from 'next/script';

现在，更新 FirstPost 组件以包含 Script 组件

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://#/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

请注意，在 Script 组件中定义了一些额外的属性

strategy 控制第三方脚本应何时加载。lazyOnload 值告诉 Next.js 在浏览器空闲时间延迟加载此特定脚本
onLoad 用于在脚本完成加载后立即运行任何 JavaScript 代码。在本示例中，我们在控制台中记录一条消息，指出脚本已正确加载

尝试访问 http://localhost:3000/posts/first-post。通过使用浏览器的开发者工具，您应该在“控制台”面板中看到上面记录的消息。此外，您可以运行 window.FB 以查看脚本是否已填充此全局变量。

注意： Facebook SDK 仅用作人为示例，以展示如何以高性能的方式将第三方脚本添加到您的应用程序中。现在您已经了解了在 Next.js 中包含第三方功能的基础知识，您可以在继续操作之前从 FirstPost 中删除 Script 组件。

要了解有关 Script 组件的更多信息，请查看文档。

第三方 JavaScript

添加第三方 JavaScript

使用 Script 组件

您已完成本章节14