ホーム>プログラミング関連>その他のソースコード
ダウンロード

注意

Crittersの所有権は、今後のプロジェクトを維持するNUXTチームに移りました。生き物を使い続けたい場合は、https://github.com/danielroe/beastiesの積極的に維持されたフォークに切り替えてください。このリポジトリはアーカイブされてお​​り、将来の更新は受け取りません。

生き物

Crittersは、アプリの重要なCSSを象徴し、残りを怠zyでロードするプラグインです。

生き物

ヘッドレスブラウザを使用してコンテンツをレンダリングしないため、他のオプションとは少し異なります。このトレードオフにより、生き物は非常に速く軽量になります。また、Crittersは、倍以上のコンテンツに必要なものだけでなく、ドキュメントで使用されるすべてのCSSルールを誘惑することを意味します。代替案については、同様のライブラリを参照してください。

Crittersのデザインは、プレレンダリング/SSR'Dシングルページアプリケーションの重要なCSSを挿入するときにぴったりです。プレレンダーローダーにとって優れた賛辞として開発され、ほとんどのシングルページアプリケーションの最初のペイントタイムを劇的に改善しました。

特徴

  • 高速 - ブラウザなし、依存関係はほとんどありません

  • Webpack Critters-Webpack-Pluginと統合します

  • 重要なフォントのプリロードおよび/またはインラインのサポートをサポートします

  • Prunes未使用のCSSキーフレームとメディアクエリ

  • 怠zyなスタイルシートからインラードCSSルールを削除します

インストール

まず、開発者を開発依存関係としてインストールします。

 npm i -d critters

または

糸は-D生き物を追加します

簡単な例

「生き物」から生き物をインポート; const critters = new Critters（{
  //オプション構成（下記参照）}）; const html = `<style> .red {color：red} .blue {color：blue} </style> <div class =" blue ">私はblue </ div> `; const inlined = await critters.process（html）; console.log（inlined）; //" <style> .blue {color：blue} </style> <div class = "blue">私は青</div> "

Webpackでの使用

Crittersは、Critters-Webpack-Pluginと呼ばれるWebpackプラグインとしても入手できます。

Webpackプラグインは、メインcrittersパッケージと同じ構成オプションをサポートしています。

 // webpack.config.js+const critters = require（ 'critters-webpack-plugin'）; module.exports = {
  プラグイン：[+ new Critters（{+ //オプションの構成+ Preload： 'swap'、+ includeElectors：[/^.btn/、 '.banner']、+}））
  ]
}

それでおしまい！結果として生じるHTMLには、重要なCSSがインライン化され、StyleSheetsがレイジーロードされます。

使用法

生き物

すべてオプション。それらをnew Critters({ ... })に渡します。

パラメーター

  • options

プロパティ

  • pathストリングベースパスCSSファイルの位置（デフォルト： '' ）

  • publicPath String CSSリソースのパブリックパス。このプレフィックスはHREFから削除されます（デフォルト： '' ）

  • 外部スタイルシートからのexternalブールインラインスタイル（デフォルト： true ）

  • inlineThreshold番号インラインの外部スタイルシートは、特定のサイズよりも小さい（デフォルト： 0 ）

  • minimumExternalSize番号非クリティカルな外部スタイルシートがこのサイズを下回る場合、それをインラインにするだけです（デフォルト： 0 ）

  • pruneSource boolean外部StyleSheetからインラインドルールを削除します（デフォルト： false ）

  • mergeStylesheetsブール奏これらのスタイルシートを単一の<style>タグに統合しました（デフォルト： true ）

  • additionalStylesheets配列<String>重要なCSSを探している間に使用する他のスタイルシートを一致させるためのグローブ。

  • reduceInlineStylesブールオプションは、重要なCSSについてインラインスタイルを評価する必要があるかどうかを示します。デフォルトでは、インラインスタイルのタグが評価および書き換えられ、重要なCSSのみを含むように書き直されます。インラインスタイルの処理をスキップするには、 falseに設定します。 （デフォルト： true ）

  • 使用する戦略をプリロードするpreload文字列

  • noscriptFallback boolean add <noscript> JSベースの戦略へのフォールバック

  • inlineFontsブールインラインクリティカルフォントフェイスルール（デフォルト： false ）

  • preloadFonts Boolean Preloadsクリティカルフォント（デフォルト： true ）

  • inlineFonts + preloadFonts * valuesを設定するためのfontsブールの速記：値：

    • 重要なフォントフェイスルールをインラインにtrueに、フォントをプリロードする

    • フォントフェイスルールをインラインにしないfalse 、フォントをプリロードしないでください

  • keyframes文字列は、どのキーフレームルールがインラインされているかを制御します。*値：

    • "critical" ：（デフォルト）重要なCSSが使用するインラインキーフレームルール

    • "all"すべてのキーフレームルールをインラインにします

    • "none"すべてのキーフレームルールを削除します

  • 臨界CSSの結果としてブールの圧縮compress （デフォルト： true ）

  • logLevel Stringはプラグインのログレベルを制御します（デフォルト： "info" ）

  • loggerオブジェクトは、カスタムロガーインターフェイスロガーを提供します

  • includeSelectors regexp |文字列は、重要なCSSに含める必要があるセレクターのリストを提供します。 regexpと文字列の両方を受け入れます。

ルールを含める/除外します

CSSにコメントを追加することにより、重要なCSSの一部になるルールを含めるか除外できます

次のCSSルールを含める/除外するシングルラインコメント

/ * critters：exclude */。selector1{/ *このルールは重要なcssから除外されます */}

.selector2 {/ *これは正常に評価されます */}/ * critters：include */。selector3{/ *このルールは重要なcss */}に含まれます

.selector4 { / *これは正常に評価されます * /}

開始マーカーと終了マーカーを追加して、複数のルールを含む/除外します

/ * critters：exclude start */。selector1{/ *このルールは重要なcssから除外されます */}

.selector2 {/ *このルールは重要なcss */}/ * crittersから除外されます：除外 */
 / * critters：includ start */。selector3{/ *このルールは重要なCSSに含まれます */}

.selector4 {/ *このルールは重要なcss */}/ * crittersに含まれます：include end */

Critters Container

デフォルトでは、Crittersは入力HTML全体に対してCSSを評価します。 Crittersは、DOM全体を再構築し、CSSセレクターを評価して一致するノードを見つけることにより、重要なCSSを評価します。通常、これは、生き物が軽量で高速であるため、うまく機能します。

場合によっては、入力HTMLが非常に大きく、深くネストされている可能性があり、再構築されたDOMがはるかに大きくなり、重要なCSS生成が遅くなる可能性があります。 Crittersは、ヘッドレスブラウザーが関係していないため、ビューポートのサイズと折りたたみの上にある特定のノードを認識していません。

この問題を克服するために、CrittersはCritters容器を利用します。

Crittersコンテナはビューポートを模倣し、 data-critters-container折り畳みの上のHTML要素を含むトップレベルのコンテナに追加することで有効にすることができます。

ビューポートの内容を大まかに推定し、コンテンツの周りに<div data-critters-container >を追加できます。

 <html>
  <body> <div class = "container"> <div data-critters-container>/ * htmlこのコンテナ内のhtmlは、重要なcss */</div>/ * htmlを評価するために使用されます。 div> <footer> </footer>
  </body> </html>

注：これは生き物のパフォーマンスを改善する簡単な方法です

ロガー

カスタムロガーインターフェイス：

タイプ：オブジェクト

プロパティ

  • trace関数（String）トレースメッセージを印刷します

  • debug関数（文字列）デバッグメッセージを印刷します

  • info関数（文字列）情報メッセージを印刷します

  • warn FUNCTION（String）警告メッセージを印刷します

  • error関数（文字列）エラーメッセージを印刷します

loglevel

プラグインのログレベルを制御します。ロガーが使用するレベルを指定します。ロガーは、指定されたレベルの下の任意のログレベルの出力を生成しません。利用可能なレベルと注文は次のとおりです。

  • 「情報」 （デフォルト）

  • 「警告」

  • "エラー"

  • "トレース"

  • "デバッグ"

  • "静けさ"

タイプ：（ "info" | "warn" | "error" | "trace" | "debug" | "silent" ））

Preloadstrategy

レイジーロードスタイルシートに使用するメカニズム。

注： JSは、JavaScript（無効にならない限り<noscript>に戻る）を必要とする戦略を示します。

  • デフォルト： StyleSheetリンクをドキュメントの最後に移動し、その代わりにプリロードメタタグを挿入します。

  • 「Body」：すべての外部StyleSheetリンクをドキュメントの最後に移動します。

  • 「メディア」： media="not x"を追加し、ロードしたら削除することにより、スタイルシートを非同期にロードします。 JS

  • 「スワップ」：スタイルシートのリンクを変換して、 rel="stylesheet"に交換するプリロードにロードされたら（詳細）。 JS

  • 「Swap-High」： <link rel="alternate stylesheet preload">使用し、 rel="stylesheet"にスワップしてロードされます（詳細）。 JS

  • 「JS」： LoadCSと同様の非同期CSSローダーを注入し、それを使用してスタイルシートをロードします。 JS

  • 「JS-Lazy」： "js"のように。ただし、スタイルシートは完全にロードされるまで無効になります。

  • false：プリロードタグの追加を無効にします。

タイプ：（デフォルト| "body" | "media" | "swap" | "swap-high" | "js" | "js-lazy" ）

同様のライブラリ

重要なCSSをインラインできる他のライブラリがあり、それぞれがわずかに異なるアプローチを備えています。ここにいくつかの素晴らしいオプションがあります：

  • 致命的

  • ペントハウス

  • webpack-critical

  • webpack-plugin-critical

  • html-critical-webpack-plugin

  • React-snap

ライセンス

Apache 2.0

これは公式のGoogle製品ではありません。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて