2021 年，Chrome Aurora 团队推出了脚本 组件来改进 Next.js 中第三方脚本的加载性能。自推出以来 扩展了其功能，以便更轻松地加载第三方资源， 为开发者提供更快的速度
本博文概要介绍了我们已经发布的新功能， 尤其是 @next/third-parties 库，以及我们路线图中未来计划的概述。
第三方脚本的性能影响
在 Next.js 网站中，所有第三方请求中有 41% 是脚本。取消点赞其他内容 脚本可能需要花费相当长的时间来下载和执行， 这可能会阻止呈现并延迟用户互动。来自 Chrome 的数据 用户体验报告 (CrUX) 显示，会加载更多第三方的 Next.js 网站 脚本的 Interaction to Next Paint (INP) 和 Largest Contentful Paint (LCP) 通过率。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">在此图表中观察到的相关性并不意味着存在因果关系。不过，本地 实验提供了更多证据，证明第三方脚本显著 对网页性能的影响例如，下面的图表比较了各种实验 （其中包含 18 个随机选择的 标记 - 已添加到分类法（一种热门的 Next.js 示例）中 应用。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">WebPageTest 文档 提供了有关如何衡量这些时间的详细信息。我们看一下 所有这些实验指标都会受到 GTM 容器的影响对于 例如 Total Blocking Time (TBT)，这是一项实用的实验 代理 INP - 实现了将近 20 倍的增长。
脚本组件
在 Next.js 中推出 <Script> 组件时，我们确保引入了
它通过一个与传统的 <script> 非常相似的人性化 API
元素。通过使用该 API，开发者可以在任意环境中
组件，而 Next.js 将负责对
关键资源加载完成后运行脚本。
<!-- By default, script will load after page becomes interactive -->
<Script src="https://example.com/sample.js" />
<!-- Script is injected server-side and fetched before any page hydration occurs -->
<Script strategy=”beforeInteractive” src="https://example.com/sample.js" />
<!-- Script is fetched later during browser idle time -->
<Script strategy=”lazyOnload” src="https://example.com/sample.js" />
成千上万的 Next.js 应用，包括一些热门网站，例如
Patreon、Target 和
概念 - 使用 <Script> 组件。尽管
一些开发者对以下
事情：
- 将
<Script>组件放置在 Next.js 应用中的什么位置，同时遵循 根据不同第三方提供商的不同安装说明 （开发者体验）。 - 对于不同的加载环境， 第三方脚本（用户体验）。
为解决这两个问题，我们推出了 @next/third-parties，
提供一组经过优化的组件和实用程序的专用库
。
开发者体验：使第三方库更易于管理
很多 Next.js 网站都使用了许多第三方脚本，
Google 跟踪代码管理器是最受欢迎的，使用方式包括：
分别为 66% 的网站。
@next/third-parties 在 <Script> 的基础上构建而成
引入一个更高级的封装容器，用于简化
这些常见的使用场景
import { GoogleAnalytics } from "@next/third-parties/google";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<GoogleTagManager gtmId="GTM-XYZ" />
</html>
);
}
Google Analytics- 另一种广泛使用的第三方脚本 （52% 的 Next.js 网站）- 也有自己的专用组件。
import { GoogleAnalytics } from "@next/third-parties/google";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<GoogleAnalytics gaId="G-XYZ" />
</html>
);
}
@next/third-parties 简化了加载常用脚本的过程，
同时也拓展了我们为其他第三方供应商开发实用程序的能力。
例如嵌入。例如，Google 地图和 YouTube 嵌入代码
用于
8%
和
4%
Next.js 网站的两个不同版本
以便更轻松地加载
import { GoogleMapsEmbed } from "@next/third-parties/google";
import { YouTubeEmbed } from "@next/third-parties/google";
export default function Page() {
return (
<>
<GoogleMapsEmbed
apiKey="XYZ"
height={200}
width="100%"
mode="place"
q="Brooklyn+Bridge,New+York,NY"
/>
<YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
</>
);
}
用户体验：提高第三方库的加载速度
在理想情况下，每个被广泛采用的第三方库都将完全 因此无需进行任何用于提升性能的抽象操作。 不过，在这成为现实之前，我们可以试着 通过 Next.js 等热门框架集成后，能够获得良好的体验。我们可以 尝试不同的加载技术，确保脚本按顺序 正确方式，并最终与第三方分享我们的反馈 以鼓励向上游进行更改。
以 YouTube 嵌入内容为例。某些替代实现方式
相比原生嵌入代码的性能要好得多。目前，<YouTubeEmbed>
由 @next/third-parties 个用户导出的组件使用了
lite-youtube-embed
使用“Hello, World”Next.js 比较，加载大量
。
<ph type="x-smartling-placeholder">同样，对于 Google 地图，我们将 loading="lazy" 添加为
这样可以确保地图仅在
视口这似乎是一个很明显的属性，特别是
自 Google 地图推出以来，
文档
添加到他们的示例代码段中，但只有
嵌入 Google 地图的 45% 的 Next.js 网站使用了 loading="lazy"。
在 Web Worker 中运行第三方脚本
我们正在 @next/third-parties 中探索的一项高级技术是
将第三方脚本分流给 Web Worker。推广方
Partytown 等库，这样可以减少
可显著减少第三方脚本对网页性能的影响，
将它们完全从主线程中移除。
下面的动画 GIF 显示了长时间运行的任务和主线程的变体
向 GTM 容器应用不同的 <Script> 策略时的阻塞时间
Next.js 网站中请注意，虽然切换策略选项
延迟了这些脚本的执行时间，并将其重新定位到 Web Worker
完全消除了它们在主线程上花费的时间。
<ph type="x-smartling-placeholder">在此特定示例中，将 GTM 容器的执行及其 将代码脚本关联到 Web Worker，将 TBT 减少了 92%。
值得注意的是，如果管理方式不谨慎，
会破坏许多第三方脚本，难以进行调试。即将推出
我们会验证
在 Web Worker 中运行时，@next/third-parties 可以正常运行。如果是这样，我们将
为开发者提供一种简便的可选方式，
分析法。
后续步骤
在开发这个软件包的过程中，很明显，
需要集中第三方加载建议，以便其他框架
也可以从所用的相同基础技术中受益。这促使我们
建立第三方
Capital 是图书馆
使用 JSON 来描述第三方加载技术，
是 @next/third-parties 的基础。
接下来，我们将继续专注于改进所提供的组件。 并扩展我们的工作，将类似的实用程序纳入 热门框架和内容管理系统平台目前，我们正在与 Nuxt 合作 并且正计划发布类似的第三方实用程序， 生态系统。
如果您在 Next.js 应用中使用的第三方提供方均受
@next/third-parties,
安装软件包
尝试一下吧！我们非常期待听到您对
GitHub