在我的构建中包括关键路径CSS提取

Question

在阅读了关键路径css后,我想知道如何将其嵌入到我的构建中.那里有没有完成的工具吗？该过程需要是自动化的,以避免内联CSS与其他CSS失去同步.

如果今天没有这样的工具,我可以看到我如何制作一个(比如一个咕噜的插件),将这个实验脚本与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。