README

此包是实验性的，可能不会被维护。请自行承担风险使用。

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

为什么？

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

更多信息

https://developers.google.com/web/fundamentals/performance/

安装
使用方法
- 生成关键路径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 burtwraynolds/critical-css

3) 配置Laravel

服务提供商

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

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

控制台

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

protected $commands = [
    \burtwraynolds\CriticalCss\Console\CriticalCssMake::class,
    \burtwraynolds\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>

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

当然，请确保异步加载页面的完整CSS，例如使用loadCSS（https://github.com/filamentgroup/loadCSS）。

完整示例（使用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>

对于多个视图，您可以在@section中包装@criticalCss，然后在主视图中@yield该部分。

关于Laravel 5.0兼容性的说明

在Laravel 5.0上，您必须在配置中将'blade_directive' => false设置为true。这不是推荐的做法，但是因为5.1中引入了自定义指令Custom Directives，所以必须这样做。

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

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

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

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

burtwraynolds / critical-css

维护者

详细信息