README

扩展并增强 Silverstripe 的要求系统，提供内联资源、http/2 服务器推送、延迟 CSS 等功能。

注意：此模块旨在提供一些工具，可能有助于提高网站的端性能。它不是“现成”的解决方案，应谨慎使用。仅将所有内容设置为预加载或推送，或者在未分析其用途和位置的情况下直接内联内容，可能会导致性能降低！

要求

*Silverstripe 4.x / 5.x

安装

使用 composer require dorsetdigital/silverstripe-enhanced-requirements ^1 安装

安装完成后，模块将设置 Requirements 系统使用增强的后端，但默认情况下不会启用任何附加功能。

使用方法

该模块扩展了标准的 Requirements 方法，提供了额外的选项。目前，这些额外选项适用于 CSS 和 JS 文件

内联
预加载
推送
nonce

以下选项也适用于 CSS 文件

延迟

内联

当此选项被设置时，框架将尝试将提供的 CSS 或 JS 文件作为内联代码添加，而不是外部加载。这允许开发者仍然使用现有工作流程构建前端资源，但在有优势的地方内联处理过的内容

Requirements::css('build/app.css', 'screen', ['inline' => true]);

Requirements::javascript('build/app.js', ['inline' => true]);

预加载

预加载选项自动将 <link rel="preload"> 标签添加到标记，以帮助改进重要资源的加载顺序

Requirements::javascript('build/critical.js', ['preload' => true]);

这将导致以下标签被添加到标记中

<link rel="preload" as="script" type="application/javascript" href="/build/critical.js?m=1623314562">

推送

推送选项向响应添加 HTML 链接标题。在支持此功能的系统中，这将触发指定资源的服务器推送，以便在浏览器完成解析文档之前就提供这些资源。

Requirements::css('build/bundle.css', 'screen', ['push' => true]);

这将导致类似于以下 HTTP 标头的添加到响应中

Link </build/bundle.css?m=1623314562>; rel=preload; as=style

nonce

这添加了 HTML 的 'nonce' 属性，如要求。对于处理 CSP 实现，可能很有用。

延迟（CSS）

如果将延迟选项添加到 CSS 包含中，将向文档的头部注入一个标签，该标签在页面加载后加载指定的 CSS 文件。这可以帮助减少不需要初始渲染的样式对页面阻塞的影响。为了支持不运行 JavaScript 的浏览器，还添加了 noscript 标签。结果输出如下所示

<link rel="preload" href="/path-to-file.css?m=1690972760" as="style" onload="this.onload=null;this.rel="stylesheet" />
<noscript><link rel="stylesheet" href="/path-to-file.css?m=1690972760" /></noscript>

标签排序

该模块不会更改通过 Requirements API 添加的标签的顺序，也不会更改默认类方法的签名（除添加 themedCSS() 和 themedJavascript() 方法的第三个参数外），因此应作为现有代码的即插即用替换。

预加载标签通过 addHeadTags() 方法添加到页面。默认情况下，这些标签添加到 <head> 部分的底部之后 CSS 文件已添加。这种行为可能并不总是期望的。如果情况如此，则可以配置模块以在添加样式/脚本之前注入任何自定义标签之前。由于这将影响任何已添加的自定义标签，而不仅仅是预加载标签，因此在部署到生产之前彻底测试更改此选项的结果是必要的，以防出现意外的副作用。

要将自定义标签设置为首先注入，请在网站的yml配置文件中使用以下内容

DorsetDigital\EnhancedRequirements\View\Enhanced_Backend:
  custom_tags_first: true

dorsetdigital / silverstripe-enhanced-requirements

维护者

详细信息

README

要求

安装

使用方法

内联

预加载

推送

nonce

延迟（CSS）

标签排序