critters

حذر

انتقلت ملكية المخلوقات إلى فريق Nuxt ، الذي سيحافظ على المشروع للمضي قدمًا. إذا كنت ترغب في الاستمرار في استخدام المخلوقات ، فيرجى التبديل إلى الشوكة التي تم صيانتها بنشاط على https://github.com/danielroe/beasties. تم الآن أرشفة هذا الريبو ولن يتلقى أي تحديثات مستقبلية.

المخلوقات

Critters هو مكون إضافي يطالب CSS CSS الحرجة في التطبيق والكسل الباقي.

المخلوقات

الأمر مختلف قليلاً عن الخيارات الأخرى ، لأنه لا يستخدم متصفحًا مقطوع الرأس لتقديم المحتوى. يتيح هذه المقايضة أن تكون المخلوقات سريعة وخفيفة الوزن للغاية. وهذا يعني أيضًا أن المخلوقات تحطّم جميع قواعد CSS التي تستخدمها المستند الخاص بك ، بدلاً من تلك اللازمة للمحتوى أعلاه. للاطلاع على البدائل ، راجع مكتبات مماثلة.

يجعل تصميم Critters مناسبًا جيدًا عند تحديد CSS الحرجة لتطبيقات صفحة واحدة من قبل Prerendered/SSR'd. تم تطويره ليكون مجاملة ممتازة لمحمل Prerender ، حيث تم الجمع بين تحسين وقت الطلاء بشكل كبير لمعظم تطبيقات الصفحات الواحدة.

سمات

• سريع - لا متصفح ، القليل من التبعيات

• يتكامل مع WebPack Critters-Webpack-Plugin

• يدعم التحميل المسبق و/أو إطار الخطوط الحرجة

• الخوخ غير مستخدمة CSS Keyframes واستعلامات الوسائط

• يزيل قواعد CSS المضمّنة من أوراق الأنماط المحملة كسول

تثبيت

أولاً ، قم بتثبيت المخلوقات كاعتماد على التطوير:

 NPM I -D Critters

أو

 غزل إضافة -المخلوقات D

مثال بسيط

 استيراد المخلوقات من "المخلوقات" ؛ const critters = المخلوقات الجديدة ({
  // التكوين الاختياري (انظر أدناه)}) ؛ const html = `<style> .red {color: red} .blue {color: Blue} </style> <div class =" blue "> أنا أزرق </ div> `؛ const inlined = await critters.process (html) ؛ console.log (inlined) ؛ //" <style> .blue {color: Blue} </style> <div class = "Blue"> أنا أزرق </div> "

الاستخدام مع webpack

تتوفر Critters أيضًا كمكون إضافي على WebPack يسمى Critters-Webpack-Plugin.

يدعم المكون الإضافي لـ WebPack نفس خيارات التكوين مثل حزمة critters الرئيسية:

 // webpack.config.js+const critters = require
  المكونات الإضافية: [+ Critters New ({+ // التكوين الاختياري+ التحميل المسبق: 'swap' ،+ يشمل المسلسلات: [/^.btn/ ، '.banner'] ،+})
  ]
}

هذا كل شيء! سوف يكون HTML الناتج مضمون CSS الحرجة وورائح الأنماط المحملة.

الاستخدام

المخلوقات

كل اختياري. تمريرها إلى new Critters({ ... }) .

حدود

• options

ملكيات

• path مسار سلسلة مسار ملفات CSS (افتراضي: '' )

• publicPath سلسلة المسار العام لموارد CSS. تتم إزالة هذه البادئة من HREF (افتراضي: '' )

• الأنماط المخللة external من أوراق الأنماط الخارجية (الافتراضي: true )

• رقم inlineThreshold Imphereheledsheshepshines أصغر من حجم معين (افتراضي: 0 )

• الحد الأدنى للرقم minimumExternalSize إذا 0 ورقة الأنماط الخارجية غير الحرجة ستكون أقل

• pruneSource Boolean قم بإزالة القواعد المضمّنة من ورقة الأنماط الخارجية (الافتراضي: false )

• mergeStylesheets Boolean مدمجة ملاءمة في علامة <style> واحدة (افتراضي: true )

• صفيف أوراق additionalStylesheets <String> لمطابقة أوراق الأنماط الأخرى لاستخدامها أثناء البحث عن CSS الحرجة.

• يشير reduceInlineStyles الخيار المنطقي إلى ما إذا كان ينبغي تقييم الأنماط المضمنة ل CSS الحرجة. بشكل افتراضي ، سيتم تقييم علامات النمط المضمّن وإعادة كتابتها لاحتواء CSS الحرجة فقط. قم بتعيينها على false لتخطي المعالجة الأنماط المضمنة. (افتراضي: true )

• سلسلة preload التي استراتيجية التحميل المسبق للاستخدام

• noscriptFallback Boolean Add <noscript> إلى استراتيجيات تعتمد على JS

• inlineFonts Boolean Inline Critical Font-Font Rules (افتراضي: false )

• preloadFonts Boolean Preloads الخطوط الحرجة (الافتراضي: true )

• fonts المنطقية الاختصار لإنشاء inlineFonts + preloadFonts * القيم:

• true أن القواعد الواجهة للخطوط المسبقة والتحويل المسبق للخطوط

• false لا تضمن أي قواعد لوجه الخط ولا توجد خطوط مسبق

• أدوات التحكم في سلسلة keyframes التي يتم تضمين قواعد إطارات المفاتيح.* القيم:

• "critical" : (افتراضي) قواعد الإطارات الرئيسية المضمّنة التي تستخدمها CSS الحرجة

• "all" تضمن جميع قواعد الإطارات الرئيسية

• "none" قم بإزالة جميع قواعد إطارات المفاتيح

• compress الضغط المنطقي الناتج عن CSS الحرجة (الافتراضي: true )

• عناصر التحكم في سلسلة logLevel مستوى سجل المكون الإضافي (الافتراضي: "info" )

• كائن logger يوفر مسجل واجهة لوجبر مخصصة

• includeSelectors regexp | توفر سلسلة قائمة من المحددات التي يجب تضمينها في CSS الحرجة. يقبل كل من regexp و string.

تضمين/استبعاد القواعد

يمكننا تضمين أو استبعاد القواعد لتكون جزءًا من CSS الحرجة عن طريق إضافة تعليقات في CSS

تعليقات سطر واحد لتضمين/استبعاد قاعدة CSS التالية

 / * المخلوقات: استبعاد */. celector1 {/ * سيتم استبعاد هذه القاعدة من CSS الحرجة */}

.selector2 {/ * سيتم تقييم هذا بشكل طبيعي */}/ * المخلوقات: تضمين */. celector3 {/ * سيتم تضمين هذه القاعدة في CSS CSS */} الحرجة

.selector4 { / * سيتم تقييم هذا بشكل طبيعي * /}

بما في ذلك/استبعاد قواعد متعددة عن طريق إضافة علامات البدء والنهاية

 / * المخلوقات: استبعاد البدء */. celector1 {/ * سيتم استبعاد هذه القاعدة من CSS الحرجة */}

.selector2 {/ * سيتم استبعاد هذه القاعدة من CSS الحرجة */}/ * المخلوقات: استبعاد النهاية */

 / * المخلوقات: قم بتضمين start */. selector3 {/ * سيتم تضمين هذه القاعدة في CSS الحرجة */}

.selector4 {/ * سيتم تضمين هذه القاعدة في المخلوقات CSS */}/ *

حاوية المخلوقات

بشكل افتراضي ، يقوم المخلوقات بتقييم CSS مقابل HTML بالكامل. تقوم المخلوقات بتقييم CSS الحرجة عن طريق إعادة بناء DOM بأكملها وتقييم محددات CSS للعثور على العقد المطابقة. عادة ما يعمل هذا بشكل جيد حيث يكون المخلوقات خفيفة الوزن وسريع.

بالنسبة لبعض الحالات ، يمكن أن تكون HTML مدخلات كبيرة جدًا أو متداخلة بعمق مما يجعل DOM أعيد بناؤه أكبر بكثير ، مما قد يؤدي بدوره إلى إبطاء جيل CSS الحرج. المخلوقات ليست على دراية بحجم منفذ العرض وما هي العقد المحددة أعلى من الطية نظرًا لعدم وجود متصفح مقطوع الرأس.

للتغلب على هذه القضية ، تستخدم المخلوقات حاويات المخلوقات .

تحاكي حاوية المخلوقات مُصورة العرض ويمكن تمكينها عن طريق إضافة data-critters-container في حاوية المستوى الأعلى التي تحتوي على عناصر HTML أعلى الطية.

يمكنك تقدير محتويات منفذ العرض الخاص بك تقريبًا وإضافة data-critters-container حول المحتويات.

 <html>
  يتم استخدام <Body> <div class = "container"> <يتم استخدام criters-container>/ * html داخل هذه الحاوية لتقييم CSS CSS */</div>/ * html عند تقييم CSS */</ div> <tooler> </tower>
  </body> </html>

ملاحظة: هذه طريقة سهلة لتحسين أداء المخلوقات

المسجل

واجهة مسجل مخصصة:

النوع: كائن

ملكيات

• trace وظيفة (سلسلة) تطبع رسالة تتبع

• دالة debug (سلسلة) يطبع رسالة تصحيح

• وظيفة info (سلسلة) تطبع رسالة معلومات

• warn وظيفة (سلسلة) تطبع رسالة تحذير

• وظيفة error (سلسلة) يطبع رسالة خطأ

Loglevel

التحكم في مستوى سجل المكون الإضافي. يحدد المستوى الذي يجب أن يستخدمه المسجل. لن ينتج المسجل الإخراج لأي مستوى سجل أسفل المستوى المحدد. المستويات المتاحة والطلب هي:

• "معلومات" (افتراضي)

• "تحذير"

• "خطأ"

• "يتعقب"

• "تصحيح"

• "صامت"

النوع: ( "info" | "warn" | "error" | "trace" | "debug" | "silent" )

preloadstrategy

آلية لاستخدام أوراق الأنماط الكسول.

ملاحظة: يشير JS إلى استراتيجية تتطلب JavaScript (تعود إلى <noscript> ما لم يتم تعطيلها).

• الافتراضي: نقل روابط ورقة الأنماط إلى نهاية المستند وأدخل علامات التعريف المسبقة في مكانها.

• "الجسم": حرك جميع روابط ورقة الأنماط الخارجية إلى نهاية المستند.

• "الوسائط": أوراق أنماط التحميل بشكل غير متزامن عن طريق إضافة media="not x" وإزالة التحميل بمجرد تحميلها. JS

• "Swap": تحويل روابط ورقة الأنماط إلى التحميل المسبقة التي تبادل إلى rel="stylesheet" بمجرد تحميلها (التفاصيل). JS

• "Swap-High": استخدم <link rel="alternate stylesheet preload"> ومبادلة إلى rel="stylesheet" بمجرد تحميلها (التفاصيل). JS

• "JS": حقن محمل CSS غير متزامن مماثل لـ LOADCSS واستخدامه لتحميل أوراق الأنماط. JS

• "JS-Lazy": مثل "js" ، ولكن يتم تعطيل ورقة الأنماط حتى يتم تحميلها بالكامل.

• خطأ: تعطيل إضافة علامات التحميل المسبق.

النوع "js" (افتراضي | "body" | "media" "swap" "js-lazy" "swap-high"

مكتبات مماثلة

هناك عدد من المكتبات الأخرى التي يمكن أن تضمن CSS الحرجة ، ولكل منها نهج مختلف قليلاً. فيما يلي بعض الخيارات الرائعة:

• شديد الأهمية

• كنة

• Webpack-Critical

• Webpack-plugin-critical

• html-critical-webpack-plugin

• رد فعل SNAP

رخصة

Apache 2.0

هذا ليس منتج Google الرسمي.