gurucomkz/silverstripe-critical-path-css

SilverStripe 的关键路径 CSS 编译器/缓存器

维护者

详细信息

github.com/gurucomkz/silverstripe-critical-path-css

源代码

问题

安装: 9

依赖: 0

建议者: 0

安全: 0

星标: 1

关注者: 2

分支: 1

开放问题: 0

类型:silverstripe-vendormodule

dev-master 2021-11-18 20:34 UTC

Requires

BSD-3-Clause 3c13b5dc6b49e5d795918b8a6b941fda36bffa23

cssPageSpeedsilverstripecriticalpath

This package is auto-updated.

Last update: 2024-09-19 02:10:58 UTC

README

帮助生成网站每个页面的关键路径 CSS，包括该代码和延迟其他 CSS。使用 penthouse 生成 CSS。

工作原理

该模块提供了一个开发任务 GenerateCriticalPathCSS，该任务调用网站上的每个 Live 页面，并使用 penthouse 处理 HTML，缓存生成的 CSS，在常规请求 HTML 中注入后者，并使用特殊的 JavaScript 片段延迟所有已包含的本地(!) CSS 文件。

如果您选择涉及外部 CSS 文件（见下文配置），它们将被下载并存储在缓存中。

限制

  • 您想要涉及的所有 CSS 文件都必须使用 Requirements::css() 或 Requirements::themedCSS() 包含。
  • Firefox 似乎不喜欢延迟 CSS 文件，并且可能不会获得任何真正的速度提升。

要求

  • nodejs
  • yarn 或 npm

它们是在包安装后安装 penthouse 所必需的。

安装

通过 composer 安装并执行 ?flush=1。

composer require --prefer-dist gurucomkz/silverstripe-critical-path-css "dev-master"

使用 yarn 或 npm 在包目录内安装所需的包。

cd vendor/gurucomkz/silverstripe-critical-path-css
yarn || npm

使用

此任务应在目标服务器上运行。

sake dev/tasks/GenerateCriticalPathCSS

此任务可能需要很长时间，具体取决于网站上的页面数量和生成它们的 HTML 所需的努力。请注意，由于此命令在 CLI 中执行，因此您的 web 服务器产生的缓存不适用。

配置

Gurucomkz\Critpath:
  # involve the external css files
  include_external: true # default: false
  # ensure these selectors are a part of the critical path CSS
  # see https://github.com/pocketjoso/penthouse#options for 'forceInclude'
  force_css_selectors:
    - ".abc"
    - "#another"
    - "/\\.slick.*/"

待办事项

  • 单元测试

贡献

请为任何您发现的错误或缺少的功能创建一个问题或 PR。

特别感谢