README

一个用于生成和使用内联关键路径CSS的Laravel包。

为什么？

为了获得最佳性能，您可能希望将关键CSS直接内联到HTML文档中。这消除了关键路径中的额外往返，并且如果正确执行，可以用于提供“一次往返”的关键路径长度，其中只有HTML是阻塞资源。

更多信息

安装
使用方法
- 生成关键路径CSS
- 在Blade模板中使用关键路径CSS
演示
- PageSpeed Insights结果
关于Laravel 5.0兼容性的说明

安装

1) 安装Critical npm包

此包用于从HTML文档中提取关键路径CSS。

从您项目的根路径运行

$ npm install critical --save

或者，全局安装它

$ npm install -g critical

2) 引入包

接下来，您需要使用Composer引入此包

从您项目的根路径运行

$ composer require krisawzm/critical-css

3) 配置Laravel

服务提供者

将以下内容添加到config/app.php文件中的providers键

'providers' => [
    Alfheim\CriticalCss\CriticalCssServiceProvider::class,
];

控制台

要获取对criticalcss:clear和criticalcss:make命令的访问权限，请将以下内容添加到app/Console/Kernel.php文件中的$commands属性

protected $commands = [
    \Alfheim\CriticalCss\Console\CriticalCssMake::class,
    \Alfheim\CriticalCss\Console\CriticalCssClear::class,
];

配置

通过运行生成config/criticalcss.php文件的模板

$ php artisan vendor:publish

注意：配置选项的描述仅存在于配置文件中，不在此说明书中。点击这里在GitHub上打开配置文件。

使用方法

在开始之前，我强烈建议您阅读config/criticalcss.php文件。这将让您更好地了解它是如何工作的。

生成关键路径CSS

如果一切设置和配置都正确，要生成一组新的关键路径CSS文件，只需运行以下命令

$ php artisan criticalcss:make

这将为提供的每个URI（路由）生成一个唯一的文件。

参见此提交以查看实现的差异。

在Blade模板中使用关键路径CSS

服务提供者提供了一个名为@criticalCss的新Blade指令。

只需调用该指令，传递一个路由作为唯一参数，如下所示

<html>
<head>
  ...
  @criticalCss('some/route')
</head>
</html>

如果没有传递参数，将使用当前路由，但是，我强烈建议始终传递一个特定的路由。

当然，确保使用类似loadCSS（https://github.com/filamentgroup/loadCSS）之类的工具异步加载页面上的完整CSS。

完整示例（使用Elixir生成CSS文件的URL，这是可选的）

<html>
<head>
  ...
  @criticalCss('some/route')
  <script>
    !function(a){"use strict";var b=function(b,c,d){var g,e=a.document,f=e.createElement("link");if(c)g=c;else{var h=(e.body||e.getElementsByTagName("head")[0]).childNodes;g=h[h.length-1]}var i=e.styleSheets;f.rel="stylesheet",f.href=b,f.media="only x",g.parentNode.insertBefore(f,c?g:g.nextSibling);var j=function(a){for(var b=f.href,c=i.length;c--;)if(i[c].href===b)return a();setTimeout(function(){j(a)})};return f.onloadcssdefined=j,j(function(){f.media=d||"all"}),f};"undefined"!=typeof module?module.exports=b:a.loadCSS=b}("undefined"!=typeof global?global:this);
    loadCSS('{{ elixir('css/app.css') }}');
  </script>
</head>
</html>

对于多个视图，您可以将@criticalCss包裹在@section中，然后在主视图中使用@yield来输出该部分。

演示

我使用这个Bootstrap主题做了一个简单的演示。这是一个相当简单的主题，并且没有重大性能问题，但实施内联关键路径CSS确实提高了性能。

演示仓库：https://github.com/kalfheim/critical-css-demo

参见此提交以查看实现的差异。

PageSpeed Insights 结果

          | Mobile        | Desktop

------------- | ------------- | ------------- 之前 | | 之后 | |

关于Laravel 5.0兼容性的说明

在 Laravel 5.0 中，你必须在配置文件中设置 'blade_directive' => false。这不推荐，但由于在 5.1 版本中引入了自定义指令，所以必须这样做。

这将需要在 config/app.php 文件的 aliases 键中添加以下内容

'aliases' => [
    'Critical' => Alfheim\CriticalCss\Facades\Critical::class,
];

在你的 Blade 视图中，现在你可以这样做，而不是使用 @criticalCss('some/route')

{!! Critical::css('some/route') !!}

sampsoid /

维护者

详细信息