README

第三方资本

第三方资本是一个资源，它将加载流行第三方库的最佳实践集中在一个地方。

该项目提供了以下语言的实现

• JavaScript（请参阅src目录）
• PHP（请参阅inc目录）

理由

有一个大型、跨职能的Chrome倡议，旨在提高网络上的第三方资源加载。该努力的一部分是为开发者提供默认的建议集或“组件”。这些组件将帮助开发者按正确的时间顺序和检索流行的第三方资源，以最大限度地减少其对页面性能的整体影响。

为了不在多个地方重复这些建议，并期望每个工具的维护者保持它们是最新的，第三方资本将它们集中在一个带有API的单个仓库中。这个API使得消费者能够直接在他们的工具中导入建议。

这是一个演示，展示了如何使用@next/third-parties包将建议从第三方资本导入，并在构建时将其作为框架组件导出。

模式

第三方资本是一个实验性库，其规范可能会更改。

每个第三方资源的加载建议使用以下JSON模式定义

{
  id: string;
  description: string;
  website?: string;
  html?: {
    element: string;
    attributes: {
      [string]?: string,
      src?: {
        url: string;
        slugParam: string;
        params: Array<string>;  
      }
    };
  };
  stylesheets?: Array<string>;
  scripts?: Array<{
    key?: string;
    url: string | {
      url: string;
    };
    params: Array<string> ;
    optionalParams?: Record<string, string | number | undefined | null>;
    strategy: "server" | "client" | "idle" | "worker";
    location: "head" | "body";
    action: "append" | "prepend";
  } | {
    key?: string;
    code: string;
    params: Array<string> ;
    optionalParams?: Record<string, string | number | undefined | null>;
    strategy: "server" | "client" | "idle" | "worker";
    location: "head" | "body";
    action: "append" | "prepend";
  }>;
}

这些属性为消费者提供了一种启发式方法，以决定如何、何时以及在哪里加载特定的第三方资源，以最大限度地减少其对性能的影响。以下是详细信息

• id (必需)：标识符字符串
• description (必需)：第三方实体的简短描述
• website (可选)：网站URL地址
• html (可选^*)：要在3PC组件放置位置插入的HTML元素。属性属性允许您包含任何默认属性及其值，如果用户指定了不同的值，则将覆盖这些值。src属性是唯一需要遵循特定结构的属性
  • url：资源的URL
  • slugParam：用于使用户包含或替换URL的slug的参数名称
  • params：一个参数名称数组，当用户将其作为参数使用时，将这些名称分配为URL的查询参数
• stylesheets (可选^*)：需要加载的任何样式表的URL
• scripts (可选^*)：具有以下属性的外部脚本和内联脚本（代码块）的对象数组
  • url：脚本URL（仅用于外部脚本）
  • code：要注入的脚本的字符串字面量（仅用于内联脚本）
  • key (可选^*)：键字符串
  • params：一个参数名称数组，当用户将其作为参数使用时，将这些名称分配为URL的查询参数
  • optionalParams：一个对象，其中键是可选参数，值是默认值。
  • strategy：表示第三方脚本的加载策略的字符串字面量（在服务器上、在客户端、在浏览器空闲时间或在Web Worker中）
  • 位置：表示是否在页面中注入脚本的字符串字面量（仅在 strategy=server 时使用有效）
  • 动作：表示是否将脚本前置或后置的字符串字面量（仅在 strategy=server 时使用有效）

* 至少包含主要属性之一（内容、样式表或脚本）的值

支持的第三方服务

第三方资本是一个实验性库，支持的第三方服务列表可能会发生变化。

第三方资本目前提供的第三方资源及其建议的加载实践包括：

• 谷歌分析：将其卸载到 Web Worker
• 谷歌地图（嵌入）：使用 loading 属性来懒加载嵌入
• YouTube 嵌入：使用 lite-youtube-embed

尽管详细信息仍在确定中，但只有符合某些使用标准的少数第三方服务将被包括。请勿提交包括新第三方服务的请求。

限制

第三方资本将能够为许多第三方服务提供加载详细信息，但某些场景无法使用当前架构支持

• 需要尽早加载并阻止页面渲染的第三方服务（例如，cookie 允许表单，A/B 测试提供商）
• 需要开发者在某些用户交互之后运行代码的第三方服务（例如，使用 reCAPTCHA 并存储每个请求的最终得分）
• 需要用户从许多不同选项中选择（例如，从 Google Fonts 选择特定的字体）