facile-it/laminas-link-headers-module

Laminas 模块，用于通过 HeadLink 视图助手添加的资源推送 Link 头部

维护者

详细信息

github.com/facile-it/laminas-link-headers-module

主页

源代码

问题

安装次数: 9,202

依赖关系: 0

建议者: 0

安全性: 0

星标: 0

关注者: 4

分支: 0

开放问题: 0

1.0.0 2020-01-23 17:21 UTC

Requires

Requires (Dev)

MIT dc916c093396f4d5efe1cce881557818f1d69d61

  • Thomas Vargiu <thomas.vargiu.woop@facile.it>

performanceassetszendZend Frameworklinkheaderpreloadhttp2prefetchlaminas

This package is auto-updated.

Last update: 2024-08-24 04:05:28 UTC

README

Travis Scrutinizer Coverage Scrutinizer GitHub release

此模块将自动发送支持 资源提示 和 预加载 的 Link HTTP 头部，通过 HTTP 头部进行。

当前支持的提示

来自 OptionsInterface

public const MODE_PRELOAD = 'preload';
public const MODE_PREFETCH = 'prefetch';
public const MODE_DNS_PREFETCH = 'dns-prefetch';
public const MODE_PRECONNECT = 'preconnect';
public const MODE_PRERENDER = 'prerender';

配置

这是默认配置，您可以在自己的配置中覆盖这些选项。

return [
    'facile' => [
        'laminas_link_headers_module' => [
            'stylesheet_enabled' => false, // send link headers for stylesheet links
            'stylesheet_mode' => 'preload', // resource hint for stylesheet links
            'script_enabled' => false, // send link headers for scripts
            'script_mode' => 'preload', // resource hint for script links
            'http2_push_enabled' => true, // if disabled, a "nopush" attributed will be added to disable HTTP/2 push 
        ],
    ],
];

示例

配置

默认配置

return [
    'facile' => [
        'laminas_link_headers_module' => [
            'stylesheet_enabled' => false, // send link headers for stylesheet links
            'stylesheet_mode' => 'preload', // resource hint for stylesheet links
            'script_enabled' => false, // send link headers for scripts
            'script_mode' => 'preload', // resource hint for script links
            'http2_push_enabled' => true, // if disabled, a "nopush" attributed will be added to disable HTTP/2 push 
        ],
    ],
];

模板

在您的模板中

<!DOCTYPE html>
<html lang="it">
    <head>
        <?= 
        $this->headLink(['rel' => 'preload', 'as' => 'image',  'href' => $this->basePath() . $this->asset('assets/images/logo.png'), 'media' => 'image/png')
             ->headLink(['rel' => 'preload', 'as' => 'style',  'href' => $this->basePath() . $this->asset('assets/vendor.css')])
             ->headLink(['rel' => 'preload', 'as' => 'script', 'href' => $this->basePath() . $this->asset('assets/vendor.js')])
             // prefetch (low priority) resources required in th next pages
             ->headLink(['rel' => 'prefetch', 'as' => 'style', 'href' => $this->basePath() . $this->asset('assets/next.css')])
             // do not send preload headers
             ->prependStylesheet($this->basePath() . $this->asset('assets/vendor.css'))
             ->prependStylesheet($this->basePath() . $this->asset('assets/vendor.js'))
        ?>
        <?=
        $this->headScript()
            ->prependFile('/script/foo.js')
        ?>
    </head>
    <body>
        <!-- your content here -->
   
        <script type="text/javascript" src="<?= $this->basePath() . $this->asset('assets/vendor.js') ?>"></script>
    </body>
</html>

响应头部

该模块将自动向响应添加 Link 头部

Link: </assets/images/logo.png>; rel="preload"; as="image"; media="image/png",
  </assets/vendor.css>; rel="preload"; as="style",
  </assets/vendor.js>; rel="preload"; as="script",
  </assets/next.css>; rel="prefetch"; as="style"

您应该注意到资源 /script/foo.js 未在头部中，因为它未包含在预加载头链接中。

自动发送样式表预加载

在您的配置中启用 stylesheet_enabled 模式，您可以避免为您所有的样式插入预加载链接。

配置

return [
    'facile' => [
        'laminas_link_headers_module' => [
            'stylesheet_enabled' => true, // send link headers for stylesheet links 
        ],
    ],
];

您可以可选地更改 stylesheet_mode（支持的模式作为 OptionsInterface 中的常量可用）以用于样式表。

模板

在您的模板中

<!DOCTYPE html>
<html lang="it">
    <head>
        <?= 
        $this->prependStylesheet($this->basePath() . $this->asset('assets/vendor.css'))
        ?>
    </head>
    <body>
        <!-- your content here -->
    </body>
</html>

响应头部

该模块将自动向响应添加 Link 头部

Link: </assets/vendor.css>; rel="preload"; as="style"; type="text/css"; media="screen"

自动发送脚本预加载

在您的配置中启用 script_enabled 模式，您可以避免为您所有的脚本插入预加载链接。

配置

return [
    'facile' => [
        'laminas_link_headers_module' => [
            'script_enabled' => true, // send link headers for script links 
        ],
    ],
];

您可以可选地更改 script_mode（支持的模式作为 OptionsInterface 中的常量可用）以用于脚本。

模板

在您的模板中

<!DOCTYPE html>
<html lang="it">
    <head>
        <?=
        $this->headScript()
            ->prependFile('/script/foo.js')
            ->prependFile('/script/bar.js', 'text/foo')
        ?>
    </head>
    <body>
        <!-- your content here -->
    </body>
</html>

响应头部

该模块将自动向响应添加 Link 头部

Link: </script/foo.js>; rel="preload"; as="script"; type="text/javascript",
  </script/bar.js>; rel="preload"; as="script"; type="text/foo"

禁用 HTTP/2 推送

使用 HTTP/2，当请求页面时，网络服务器将通过发送预加载链接头部推送内容到浏览器。

这并不总是必要的，因为浏览器可以缓存内容，推送它们可能会增加带宽使用，但没有显著的性能提升。

您可以将配置选项 http2_push_enabled 设置为 false 来禁用推送。这将添加一个 nopush 属性，指示具有 HTTP/2 推送能力的服务器不应推送资源（例如，源可能包含其他信息，表明它可能已经在缓存中）。