README

简介

此模块允许您定义一个默认延迟脚本的后端。作为一项额外的优点，它还允许您通过向脚本添加nonce来设置简单的内容安全策略。

延迟需求

为了延迟脚本，您需要在 PageController 中替换默认的后端。

protected function init()
{
    parent::init();

    DeferBackend::replaceBackend();
}

完成此操作后，所有脚本（由模块或您自己提供）都将被延迟。这对于性能来说非常棒，因为所有脚本都变为非阻塞的，并且加载顺序得到保留。脚本添加到 head 中，因为它们不是阻塞的，浏览器可以在解析 html 时加载它们。

内联脚本

无法直接延迟内联脚本。但是，由于事件在 DOM 解析后触发，您可以将脚本包装如下

window.addEventListener('DOMContentLoaded', function() { ... });

此模块会自动执行此操作。请注意，如果您依赖于全局变量，您可能希望通过添加带有 //window.addEventListener 的注释来防止这种情况发生。这将防止我们的类自动包装您的脚本。

Css 顺序

此模块还会检查您的 css 文件，并确保您的主题文件最后加载。这确保了样式可以正确地级联。

主题 JavaScript

您可以通过传递一个包含“type”参数的选项数组来替代。

Cookie 免责声明

为了支持我的 cookieconsent 模块，您现在可以将额外的选项“cookie-consent”传递给您的 JavaScript 文件以条件性加载它们。

Requirements::javascript('myscript.js',['cookie-consent' => 'tracking']);

这也适用于自定义脚本。由于需求 API 不支持任何除脚本和唯一ID之外的内容，我们将 cookie 类型附加到唯一ID id 上。

Requirements::customScript($script, "ga-tracking");

安全头

作为一项小优惠，此模块允许您添加两个安全头

Referrer-Policy
Strict-Transport-Security（仅当启用 https 时）

public function handleRequest(HTTPRequest $request)
{
    $response = parent::handleRequest($request);

    CspProvider::addSecurityHeaders($response);

    return $response;
}

Js 模块支持

如果您想使用原生 js 模块，可以使用以下配置标志进行操作：

LeKoala\DeferBackend\DeferBackend:
    enable_js_modules: true

Js 模块默认也是延迟的。此外，带有 type=module 的脚本仅由现代浏览器加载，如果您想使用现代浏览器并让其他较旧的浏览器体验一个无 JavaScript 的网页，这可能非常有用。

这允许您在不使用 webpack 等捆绑器的情况下使用原生 es6 语法，代价是不支持较旧的浏览器。

内容安全策略

此模块还会为您的脚本添加随机的 nonce。这允许您设置简单的内容安全策略。

此外，在您的模板中提供了一个 $getCspNonce。

public function handleRequest(HTTPRequest $request)
{
    $response = parent::handleRequest($request);

    CspProvider::addCspHeaders($response);

    return $response;
}

请注意，csp 默认是禁用的。您可能希望使用以下配置启用它

LeKoala\DeferBackend\CspProvider:
    enable_csp: true
    csp_report_uri: "https://my-url-here"
    csp_report_only: false

请考虑在开始时将此设置为 csp_report_only，因为启用 csp 可能会破坏您的网站。

兼容性

已测试 ^4.10

维护者

LeKoala - thomas@lekoala.be

lekoala / silverstripe-defer-backend

维护者

详情