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（html）; console.log（innelined）; //“ <樣式> .blue {color：blue} </style> </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：禁用添加預加載標籤。