html - 在我的构建中包含关键路径 CSS 提取

Question

在阅读了关键路径 css之后，我想知道如何将其嵌入到我的构建中。是否有任何已完成的工具可以做到这一点？该过程需要可自动化以避免内联 CSS 与其他 CSS 不同步。

如果今天没有这样的工具，我可以看看如何制作一个（比如一个 grunt 插件），使用这个实验脚本和 PhantomJS，但是重新发明轮子没有意义（如果已经有的话）。

Answer 1

我有完全相同的想法 - 如果你还在寻找，我构建了我们都想要的东西：

关键路径 CSS 生成器。（我最终也没有使用您链接的工具，因为它错过了伪选择器、媒体查询、非 webkit 前缀 css 规则等）。

更多文档正在编写中，但基本上只是先安装 PhantomJS，然后像这样调用脚本：

phantomjs penthouse.js http://youSite.com/page1 yourSite.css > yourSite-criticalcss-page1.css
phantomjs penthouse.js http://youSite.com/page2 yourSite.css > yourSite-criticalcss-page2.css

您可以传入缩小的 CSS 和未缩小的 CSS - 除了删除不匹配的选择器、规则（并且我删除注释）之外，我不会修改 CSS。

Answer 2

使用 IISpeed 或 Apache/Nginx PageSpeed 模块

Google 维护了一些很棒的模块，称为 PageSpeed，适用于 Apache 和 Nginx 前端服务器。对于 .NET 上的用户，只需使用 IISpeed，即 PageSpeed 模块的 IIS 等效项。它是商业的，成本为 100 美元，但从前端的角度来看，它的作用非常了不起，并且（在许多其他东西中）处理了使用 Penthouse 时的主要问题：处理变化/动态的内容生成。

它的工作原理是将一些 javascript 注入任何页面的一些第一个访问者的头部，分析实际使用了哪些 css 规则。然后，经过几轮之后，它会收集这些 css 规则并将它们作为内联 css 注入head该页面的所有后续访问者。

这是完全自动的，适用于任何 ASP.NET 页面。然后，您避免必须在您希望加速的每个页面上手动运行 Penthouse（如上所述），并记住保持该 css 是最新的（否则它会在某些时候过时，弄乱您的样式）。

Penthouse 仍然适用于内容大部分是静态的页面。