Скачать critters - скачать исходный код critters

critters

Другой исходный код

3.0.2

Скачать

Осторожность

Право собственности на тварей переехало в команду Nuxt, которая будет поддерживать проект в будущем. Если вы хотите продолжать использовать тварей, переключитесь на активно поддержанную вилку по адресу https://github.com/danielroe/beasties. Это репо теперь архивировано и не получит никаких будущих обновлений.

Твари

Крафы-это плагин, который внедряет критические CSS вашего приложения, а остальные ленивые нагрузки.

твари

Он немного отличается от других вариантов, потому что он не использует безголовный браузер для отображения контента. Этот компромисс позволяет твари быть очень быстрым и легким . Это также означает, что тварты внедряют все правила CSS, используемые вашим документом, а не только те, которые необходимы для контента выше. Для альтернатив см. Подобные библиотеки.

Дизайн тварей делает его хорошим посадкой при внедрении критических CSS для предварительных приложений для одностраничных приложений. Он был разработан, чтобы стать отличным комплиментом для прерандер-нагрузчика, объединившись, чтобы значительно улучшить первое время краски для большинства приложений для одной страницы.

Функции

Быстрый - без браузера, мало зависимостей
Интегрируется с WebPack Charters-Webpack-Plugin
Поддерживает предварительное загрузку и/или внедрение критических шрифтов
Черносы неиспользованные ключевые кадры CSS и медиа -запросы
Удаляет вставленные правила CSS из ленивых таблиц стилей

Установка

Во -первых, установите твари в качестве зависимости развития:

 npm i -d тварей

или

 пряжа добавить твари

Простой пример

 Импортировать твари из «тварей»; const reatters = new reatters ({
  // Необязательная конфигурация (см. Ниже)}); const html = `<style> .red {color: red} .blue {color: blue} </style> <div class =" blue "> я синий </ div> `; const inlined = await reatters.process (html); console.log (inlined); //" <style> .blue {color: blue} </style> <div class = "blue"> я синий </div> "

Использование с WebPack

Крафы также доступны в виде плагина WebPack под названием Chrifters-Webpack-Plugin.

Плагин WebPack поддерживает те же параметры конфигурации, что и в пакете основных critters :

 // webpack.config.js+const critters = require ('твартер-webpack-plugin'); module.exports = {
  Плагины: [+ новые твари ({+ // Необязательная конфигурация+ предварительная нагрузка: 'swap',+ inclodcelectors: [/^.btn/, '.banner'],+})
  ]
}

Вот и все! Результирующее HTML будет иметь свой критический CSS внедренный, а стиль-таблицы ленивые.

Использование

Твари

Все необязательно. Передать их new Critters({ ... }) .

Параметры

options

Характеристики

path строки базовый путь местоположение файлов CSS (по умолчанию: '' )
publicPath строил общественный путь ресурсов CSS. Этот префикс удаляется из HREF (по умолчанию: '' )
external логические встроенные стили из внешних таблиц стилей (по умолчанию: true )
inlineThreshold Number inline внешние таблицы стилей меньше, чем заданный размер (по умолчанию: 0 )
minimumExternalSize число , если некритическая внешняя таблица стилей была бы ниже этого размера, просто встройте его (по умолчанию: 0 )
pruneSource Boolean Удалить вставленные правила из внешней таблицы стилей (по умолчанию: false )
mergeStylesheets Boolean объединенные вставленные таблицы стилей в одну тег <style> (по умолчанию: true )
additionalStylesheets массива <String> Glob для сопоставления других таблиц стилей, которые будут использоваться при поиске критических CSS.
reduceInlineStyles вариант Boolean указывает, следует ли оценить встроенные стили для критических CSS. По умолчанию теги встроенных стилей будут оценены и переписаны, чтобы содержать только критические CSS. Установите его на false , чтобы пропустить обработку встроенных стилей. (по умолчанию: true )
Строка preload , какая стратегия предварительной нагрузки для использования
noscriptFallback boolean add <noscript> запасной на стратегии на основе JS
inlineFonts Boolean Inline Critical Font Rules (по умолчанию: false )
preloadFonts Boolean Preloads Critical Cronts (по умолчанию: true )
fonts логическое сокращение для установки inlineFonts + preloadFonts * Значения:

true встроенные критические правила шрифта и предварительно загружать шрифты
false не встроить никаких правил шрифта и не предварительно загружать шрифты

keyframes строки управляют, какие правила ключевых кадров вставлены.* Значения:

"critical" : (по умолчанию) Правила встроенных ключевых кадров, используемые критическими CSS
"all" встроенные все правила ключевых кадров
"none" Удалить все правила ключевых кадров

compress логического сжатия, получая критические CSS (по умолчанию: true )
logLevel String Rathers Уровень журнала плагина (по умолчанию: "info" )
Объект logger Предоставьте пользовательский регистратор интерфейса логирования
includeSelectors regexp | Строка предоставляет список селекторов, которые должны быть включены в критические CSS. Принимает как regexp, так и строка.

Включить/исключить правила

Мы можем включить или исключить правила, чтобы стать частью критических CSS, добавив комментарии в CSS

Комментарии на одну строку включить/исключить следующее правило CSS

 / * тварты: exklide */. selector1 {/ * Это правило будет исключено из критических CSS */}

.selector2 {/ * Это будет оцениваться нормально */}/ * тварты: включить */. selector3 {/ * Это правило будет включено в критические CSS */}

.selector4 { / * Это будет оцениваться нормально * /}

В том числе/исключая несколько правил, добавив начальные и конечные маркеры

 / * тварты: исключить Start */. selector1 {/ * Это правило будет исключено из критических CSS */}

.selector2 {/ * Это правило будет исключено из критических CSS */}/ * тварей: исключить конец */

 / * тварты: включить start */. selector3 {/ * Это правило будет включено в критический CSS */}

.selector4 {/ * Это правило будет включено в критические CSS */}/ * тварты: включить End */

Тварист контейнер

По умолчанию твари оценивает CSS по всему входному HTML. Крафы оценивают критические CSS, реконструируя весь DOM и оценивая селекторы CSS, чтобы найти соответствующие узлы. Обычно это работает хорошо, так как твари легки и быстро.

В некоторых случаях входной HTML может быть очень большим или глубоко вложенным, что делает реконструированный DOM намного больше, что, в свою очередь, может замедлить критическую генерацию CSS. Крафы не знают о размере просмотра и о том, какие конкретные узлы выше сгиба, так как нет без головы браузер.

Чтобы преодолеть эту проблему, твари используют контейнеры тварей .

Контейнер тварей имитирует просмотр и может быть включен, добавив data-critters-container в контейнер верхнего уровня, который содержит элементы HTML выше сгиба.

Вы можете приблизительно оценить содержимое вашего просмотра и добавить <Div data-critters-container > вокруг содержимого.

 <html>
  <body> <div class = "container"> <div Data-critters-container>/ * html внутри этого контейнера используется для оценки критических CSS */</div>/ * HTML игнорируется при оценке критических CSS */</</ div> <gooler> </cooler>
  </body> </html>

Примечание: это простой способ повысить производительность тварей

Регистратор

Пользовательский интерфейс регистратора:

Тип: объект

Характеристики

Функция trace (строка) печатает сообщение с трассировкой
Функция debug (строка) печатает сообщение отладки
info функция (строка) печатает информационное сообщение
warn Function (String) печатает предупреждающее сообщение
Функция error (строка) печатает сообщение об ошибке

Loglevel

Управление уровнем журнала плагина. Указывает уровень, который должен использовать журналис. Регистратор не будет производить выход для любого уровня журнала под указанным уровнем. Доступные уровни и заказ:

«Информация» (по умолчанию)
"предупреждать"
"ошибка"
"след"
"отлаживать"
"тихий"

Тип: ( "info" | « "warn" "error" | "debug" "trace" "silent" |

Preloadstrategy

Механизм, который можно использовать для таблиц стилей ленивого загрузки.

Примечание. JS указывает стратегию, требующую JavaScript (возвращается к <noscript> , если не отключено).

По умолчанию: перемещайте ссылки на таблицу стилей на конец документа и вставьте метатеги предварительного нагрузки на их место.
«Тело»: переместите все внешние ссылки на таблицу стилей на конец документа.
«Media»: загружайте таблицы стилей асинхронно, добавив media="not x" и удаляя после загрузки. Младший
«Swap»: конвертируйте ссылки на таблицу стилей в предварительные нагрузки, которые обмениваются на rel="stylesheet" после загрузки (детали). Младший
«Swap-High»: используйте <link rel="alternate stylesheet preload"> и заменить на rel="stylesheet" после загрузки (детали). Младший
«JS»: внедрите асинхронный погрузчик CSS, похожий на LoadCSS и используйте его для загрузки таблиц стилей. Младший
«JS-Lazy»: как "js" , но таблица стиля отключена до полной загрузки.
FALSE: Отключает добавление тегов предварительной нагрузки.

Подобные библиотеки

Существует ряд других библиотек, которые могут внедрить критические CSS, каждая из которых имеет немного другой подход. Вот несколько отличных вариантов: