README

Magento 2 模块，使用 critical 自动生成 critical css

特性

• 通过简单命令生成 critical css
• 为“空”页面提供后备 critical css
• 通过创建自定义提供者添加 URL

安装

安装 critical 二进制文件。安装说明可以在 critical 网站 上找到。只支持 >=2.0.3 版本。

使用 Composer 将此扩展添加到您的 Magento 安装中

composer require m2-boilerplate/module-critical-css

用法

配置

需要启用 critical css 功能（2.3.4+可用）

bin/magento config:set dev/css/use_css_critical_path 1

可以在 商店 > 配置 > 开发者 > CSS 中自定义功能。

生成 critical css

运行以下命令

bin/magento m2bp:critical-css:generate

之后，您应该可以在 var/critical-css 中找到生成的 css。现在，这些 css 将自动集成到您的网站上。

通过自定义提供者添加额外的 URL

以下示例通过自定义提供者添加了 magento 联系页面

<?php

namespace Vendor\Module\Provider;

use Magento\Framework\App\Request\Http;
use Magento\Framework\App\RequestInterface;
use Magento\Framework\UrlInterface;
use Magento\Framework\View\LayoutInterface;
use Magento\Store\Api\Data\StoreInterface;
use M2Boilerplate\CriticalCss\Provider\ProviderInterface;
  
class CustomProvider implements ProviderInterface
{
    const NAME = 'custom_example';

    /**
     * @var UrlInterface
     */
    protected $url;

    public function __construct(UrlInterface $url)
    {
        $this->url = $url;
    }


    public function getUrls(StoreInterface $store): array
    {
        return [
            'contact_index_index' => $this->url->getUrl('contact'),
        ];
    }

    public function getName(): string
    {
        return self::NAME;
    }

    public function isAvailable(): bool
    {
        return true;
    }

    public function getPriority(): int
    {
        return 1200;
    }

    public function getCssIdentifierForRequest(RequestInterface $request, LayoutInterface $layout): ?string
    {
        if ($request->getModuleName() !== 'contact' || !$request instanceof Http) {
            return null;
        }
        
        if ($request->getFullActionName('_') === 'contact_index_index') {
            return 'contact_index_index';
        }

        return null;
    }
}

通过 DI 添加新的提供者

在你的模块的 etc/di.xml 中添加以下内容

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="M2Boilerplate\CriticalCss\Provider\Container">
        <arguments>
            <argument name="providers" xsi:type="array">
                <item name="custom_example" xsi:type="object">Vendor\Module\Provider\CustomProvider</item>
            </argument>
        </arguments>
    </type>
</config>

许可证

有关许可证信息，请参阅 LICENSE 文件（它是 MIT 许可证）。