critters下载 - critters源代码下载

critters

其他源码

3.0.2

下载

警告

小动物的所有权已转移到NUXT团队，后者将维护该项目未来。如果您想继续使用小动物，请通过https://github.com/danielroe/beasties切换到主动维护的叉子。此存储库现已存档，并且将来不会收到任何更新。

小动物

Critters是一个插件，它嵌入了您的应用程序的关键CSS并将其余的懒惰加载。

小动物

它与其他选项有所不同，因为它没有使用无头浏览器来渲染内容。这种权衡使动物的快速轻巧。这也意味着小动物嵌入了您的文档使用的所有CSS规则，而不仅仅是折叠内容所需的CSS规则。有关替代方案，请参见类似的库。

当将关键的CSS用于Prerendered/SSR单页应用程序时，Critters的设计使其非常合适。它被开发为对Prerender-loader的绝佳称赞，结合大多数单页应用程序，可以大大改善第一个油漆时间。

特征

快速 - 没有浏览器，很少的依赖项
与Webpack Critters-webpack-plugin集成
支持预加载和/或插入关键字体
李子未使用的CSS密钥帧和媒体查询
从懒惰的样式表中删除了内衬的CSS规则

安装

首先，将小动物作为开发依赖性：

 npm i -d小动物

或者

纱线添加-D小动物

简单示例

从“小动物”进口小动物; const Critters =新小动物（{{
  //可选配置（请参阅下文）}）; const html =`<样式> .red {color：red} .blue {color：blue} </style> <div class =“ blue”>我是蓝色</ div>`; const innilined =等待Critters.process.process（html）; console.log（innilined）; // “ <样式> .blue {color：blue} </style> <div class =“ blue”>我是蓝色</div>“

使用WebPack使用

Critter也可以作为称为Critters-webpack-Plugin的Webpack插件。

WebPack插件支持与主要critters软件包相同的配置选项：

 // webpack.config.js+const Critters = require（'Critters-webpack-plugin'）; module.exports = {
  插件：[+新小动物（{+ //可选配置+预计：'swap'，+ includeelectors：[/^.btn/，'.banner']，+}）
  这是给出的
}

就是这样！最终的HTML将其关键的CSS夹住，样式表懒惰的负载。

用法

小动物

所有可选。将它们传递到new Critters({ ... }) 。

参数

options

特性

path字符串基础路径位置CSS文件的位置（默认值： '' ）
CSS资源的publicPath String公共路径。此前缀从HREF中删除（默认值： '' ）
external布尔外线样式来自外部样式表（默认： true ）
inlineThreshold编号内联外部样式表小于给定尺寸（默认： 0 ）
如果非关键外部样式表的尺寸低于此尺寸，则minimumExternalSize化数字（默认值： 0 ）
pruneSource boolean从外部样式表中删除了内线规则（默认： false ）
mergeStylesheets布尔值将夹具的样式表合并为一个<style>标签（默认： true ）
在寻找关键CSS时，用于匹配其他样式表的additionalStylesheets风格表数组<String> glob。
reduceInlineStyles Boolean选项指示是否应评估关键CSS的内联样式。默认情况下，将评估和重写的内联样式标签仅包含关键CSS。将其设置为false以跳过处理内联样式。 （默认： true ）
preload字符串使用哪种预紧策略
noscriptFallback boolean添加<noscript>后备到基于JS的策略
inlineFonts布尔值inline关键字体脸规则（默认： false ）
preloadFonts布尔值预加载临界字体（默认值： true ）
fonts布尔速记用于设置inlineFonts + preloadFonts *值：

true于内联临界字体面条规则，并预加载字体
false ，不要嵌入任何字体脸部规则，也不预交字体

keyframes字符串控制哪些密钥帧规则是内衬的。*值：

"critical" ：（默认）关键CSS使用的内联密钥帧规则
"all"内联所有关键帧规则
"none"删除所有关键帧规则

compress布尔值压缩产生的关键CSS （默认： true ）
logLevel字符串控制插件的日志级别（默认： "info" ）
logger对象提供自定义Logger接口记录器
includeSelectors regexp |字符串提供了应包含在关键CSS中的选择器列表。接受RegexP和String。

包括/排除规则

我们可以通过在CSS中添加评论来包括或排除成为关键CSS的一部分的规则

单行注释要包括/排除下一个CSS规则

/ * Critter：排除 */。selector1 {/ *此规则将被排除在关键CSS */}中

.SELECTOR2 {/ *将正常评估 */}/ * Critter：inclage */。Selector3 {/ *此规则将包含在关键CSS */}中

.SELECTOR4 { / *将正常评估 * /}

通过添加开始标记来包括/排除多个规则

/ * Critters：排除开始 */。selector1 {/ *将从关键CSS */}中排除此规则

.SELECTOR2 {/ *此规则将被排除在关键CSS */}/ * Critters：排除End */

 / * Critter：包括开始 */。Selector3 {/ *此规则将包含在关键CSS */}中

.SELECTOR4 {/ *此规则将包含在关键CSS */}/ * Critter中：包括End */

小动物容器

默认情况下，Critter对整个输入HTML评估CSS。 Critter通过重建整个DOM并评估CSS选择器以找到匹配的节点来评估关键CSS。通常，这很好，因为生物轻巧且快速。

在某些情况下，输入HTML可能非常大或嵌套，这使重建的DOM更大，进而可以减慢关键的CSS生成。 Critter不知道视口尺寸以及哪些特定节点在折叠之上，因为不涉及无头浏览器。

为了克服这个问题，小动物利用了小动物容器。

一个小动物容器模拟了视口，可以通过将data-critters-container添加到顶级容器中来启用，这包含折叠上方的HTML元素。

您可以粗略地估算视口的内容，并在内容周围添加<div data-critters-container >。

 <html>
  <body> <div class =“容器”> <div div data-critters-container>/ *此容器内的HTML用于评估关键CSS */</div>/ *当评估关键CSS */</</</</ Div> <页脚> </脚步>
  </body> </html>

注意：这是提高小动物性能的简便方法

记录器

自定义记录器接口：

类型：对象

特性

trace功能（字符串）打印跟踪消息
debug功能（字符串）打印一个调试消息
info功能（字符串）打印信息消息
warn功能（字符串）打印警告消息
error函数（字符串）打印错误消息

loglevel

控制插件的日志级别。指定记录器应使用的级别。记录仪不会在指定级别以下的任何日志级别产生输出。可用级别和订单是：

“信息” （默认）
“警告”
“错误”
“痕迹”
“调试”
“沉默的”

预足植物

用于懒惰样式表的机制。

注意： JS表示需要JavaScript的策略（除非禁用，否则落回<noscript> ）。

默认值：将样式表链接到文档的末尾，然后将预交元标记插入其位置。
“主体”：将所有外部样式表链接移动到文档末尾。
“媒体”：通过添加media="not x"并在加载后卸下来使其加载样式表异步。 JS
“ swap”：将stylesheet链接转换为加载后（详细信息）一旦加载，将其交换为rel="stylesheet"的预加载。 JS
“交换 - 高”：使用<link rel="alternate stylesheet preload"> ，然后将加载后换成rel="stylesheet" （详细信息）。 JS
“ JS”：注入类似于LoadCSS的异步CSS加载器，并使用它来加载样式表。 JS
“ JS-Lazy”：喜欢"js" ，但是样式表被禁用直到满载。
false：禁用添加预加载标签。