ดาวน์โหลด critters - ดาวน์โหลดซอร์สโค้ด critters

critters

ซอร์สโค้ดอื่น ๆ

3.0.2

ดาวน์โหลด

คำเตือน

การเป็นเจ้าของ Critters ได้ย้ายไปที่ทีม Nuxt ซึ่งจะรักษาโครงการต่อไป หากคุณต้องการใช้ critters โปรดเปลี่ยนไปใช้ส้อมที่ได้รับการดูแลอย่างแข็งขันที่ https://github.com/danielroe/beasties repo นี้ถูกเก็บถาวรและจะไม่ได้รับการอัปเดตในอนาคต

สัตว์เลื้อยคลาน

Critters เป็นปลั๊กอินที่เชื่อมโยง CSS ที่สำคัญของแอปของคุณและขี้เกียจโหลดส่วนที่เหลือ

สัตว์เลื้อยคลาน

มันแตกต่างจากตัวเลือกอื่น ๆ เล็กน้อยเพราะ ไม่ได้ใช้เบราว์เซอร์ที่ไม่มีหัว เพื่อแสดงเนื้อหา การแลกเปลี่ยนนี้ช่วยให้ critters เร็วและเบา มาก นอกจากนี้ยังหมายถึง critters inlines กฎ CSS ทั้งหมดที่ใช้โดยเอกสารของคุณแทนที่จะเป็นเฉพาะที่จำเป็นสำหรับเนื้อหาที่เหนือกว่า สำหรับทางเลือกดูห้องสมุดที่คล้ายกัน

การออกแบบของ Critters ทำให้เหมาะสมเมื่อมี CSS ที่สำคัญสำหรับแอปพลิเคชันหน้าเดียวก่อน/SSR มันได้รับการพัฒนาให้เป็นคำชมที่ยอดเยี่ยมสำหรับ Preerender-Loader ซึ่งรวมกันเพื่อปรับปรุงเวลาการทาสีครั้งแรกอย่างมากสำหรับแอปพลิเคชันหน้าเดียวส่วนใหญ่

คุณสมบัติ

เร็ว - ไม่มีเบราว์เซอร์
รวมเข้ากับ webpack critters-webpack-plugin
รองรับการโหลดล่วงหน้าและ/หรือ inlining critical fonts
ลูกพรุนคีย์เฟรม CSS ที่ไม่ได้ใช้และการสืบค้นสื่อ
ลบกฎ CSS ที่ inlined ออกจากสไตล์ชีทที่ขี้เกียจ

การติดตั้ง

ขั้นแรกให้ติดตั้ง critters เป็นการพึ่งพาการพัฒนา:

 npm i -d critters

หรือ

 เส้นด้ายเพิ่ม -d critters

ตัวอย่างง่ายๆ

 นำเข้า critters จาก 'critters'; const critters = critters ใหม่ ({
  // การกำหนดค่าเสริม (ดูด้านล่าง)}); const html = `<style> .ed {color: red}. blue {color: blue} </style> <div class =" blue "> ฉันเป็นสีน้ำเงิน <// div> `; const inlined = รอ 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 = ต้องการ ('critters-webpack-plugin'); module.exports = {
  ปลั๊กอิน: [+ critters ใหม่ ({+ // การกำหนดค่าเสริม+ preload: 'swap',+ include electors: [/^.btn/, '.banner'],+})
  -
-

แค่ไหน! ผลลัพธ์ HTML จะมี CS ที่สำคัญและมีรูปแบบเฮ็ตที่ขี้เกียจ

การใช้งาน

สัตว์เลื้อยคลาน

เป็นทางเลือกทั้งหมด ส่งผ่านไปยัง new Critters({ ... })

พารามิเตอร์

options

คุณสมบัติ

path พาย ฐานเส้นทางฐานของไฟล์ CSS (ค่าเริ่มต้น: '' )
publicPath String เส้นทางสาธารณะของทรัพยากร CSS คำนำหน้านี้จะถูกลบออกจาก HREF (ค่าเริ่มต้น: '' )
รูปแบบอินไลน์ บูลีน external จากรูปแบบภายนอก (ค่าเริ่มต้น: true )
หมายเลข inlineThreshold แบบอินไลน์สไตล์ชีทภายนอกเล็กกว่าขนาดที่กำหนด (ค่าเริ่มต้น: 0 )
หมายเลข minimumExternalSize หากรูปแบบภายนอกที่ไม่สำคัญจะต่ำกว่าขนาดนี้เพียงแค่อินไลน์ (ค่าเริ่มต้น: 0 )
pruneSource Boolean ลบกฎ Inlined ออกจากสไตล์ชีทภายนอก (ค่าเริ่มต้น: false )
mergeStylesheets บูลีน รวมสไตล์ชีทที่ Inlined เป็นแท็ก <style> เดียว (ค่าเริ่มต้น: true )
ARRAY additionalStylesheets <String> GLOB สำหรับการจับคู่สไตล์ชีทอื่น ๆ ที่จะใช้ในขณะที่มองหา CSS ที่สำคัญ
ตัวเลือก Boolean reduceInlineStyles ระบุว่าควรประเมินรูปแบบอินไลน์สำหรับ CSS ที่สำคัญหรือไม่ โดยค่าเริ่มต้นแท็กสไตล์อินไลน์จะได้รับการประเมินและเขียนใหม่ให้มีเฉพาะ CS ที่สำคัญ ตั้งค่าเป็น false เพื่อข้ามการประมวลผลสไตล์อินไลน์ (ค่าเริ่มต้น: true )
สตริง preload ซึ่งจะใช้กลยุทธ์ล่วงหน้าที่จะใช้
บูลีน noscriptFallback เพิ่ม <noscript> ทางเลือกกลับไปยังกลยุทธ์ที่ใช้ JS
inlineFonts Boolean Inline Inline Critical Font-face (ค่าเริ่มต้น: false )
preloadFonts บูลีน preloads แบบอักษรวิกฤต (ค่าเริ่มต้น: true )
fonts บูลีน ชวเลขสำหรับการตั้งค่า inlineFonts + preloadFonts * ค่า:

true กับกฎฟอนต์หน้าอักษรวิกฤตแบบอินไลน์และโหลดฟอนต์ล่วงหน้า
false ที่จะไม่อินไลน์กฎแบบฟอนต์แบบฟอนต์และอย่าโหลดฟอนต์ล่วงหน้า

keyframes String ควบคุมกฎ KeyFrames ใดที่ Inlined* ค่า:

"critical" : (เริ่มต้น) กฎอินไลน์คีย์เฟรมที่ใช้โดย CSS ที่สำคัญ
"all" อินไลน์กฎ KeyFrames ทั้งหมด
"none" ลบกฎ KeyFrames ทั้งหมด

compress บูลี นบีบอัดทำให้เกิด CSS ที่สำคัญ (ค่าเริ่มต้น: true )
logLevel String ควบคุมระดับบันทึกของปลั๊กอิน (ค่าเริ่มต้น: "info" )
วัตถุ logger ให้ตัวบันทึกอินเตอร์เฟส Logger ที่กำหนดเอง
includeSelectors Electors regexp | สตริง ให้รายการตัวเลือกที่ควรรวมอยู่ใน CSS ที่สำคัญ ยอมรับทั้ง Regexp และ String

รวม/แยกกฎ

เราสามารถรวมหรือยกเว้นกฎที่จะเป็นส่วนหนึ่งของ CSS ที่สำคัญโดยการเพิ่มความคิดเห็นใน CSS

ความคิดเห็นบรรทัดเดียวที่จะรวม/ยกเว้นกฎ CSS ถัดไป

 / * critters: ยกเว้น */. selector1 {/ * กฎนี้จะถูกแยกออกจาก CSS ที่สำคัญ */}

.Selector2 {/ * สิ่งนี้จะได้รับการประเมินตามปกติ */}/ * critters: รวม */. selector3 {/ * กฎนี้จะรวมอยู่ใน CSS ที่สำคัญ */}

.Selector4 { / * สิ่งนี้จะได้รับการประเมินตามปกติ * /}

รวมถึง/ยกเว้นกฎหลายข้อโดยการเพิ่มเครื่องหมายเริ่มต้นและจุดสิ้นสุด

 / * critters: แยกเริ่ม */. selector1 {/ * กฎนี้จะถูกแยกออกจาก CSS ที่สำคัญ */}

.Selector2 {/ * กฎนี้จะถูกแยกออกจาก CSS ที่สำคัญ */}/ * critters: ยกเว้น End */

 / * critters: รวม start */. selector3 {/ * กฎนี้จะรวมอยู่ใน CSS ที่สำคัญ */}

.Selector4 {/ * กฎนี้จะรวมอยู่ใน CSS */}/ * Critters: รวมถึง End */

คอนเทนเนอร์ critters

โดยค่าเริ่มต้น critters ประเมิน CSS กับอินพุตทั้งหมด HTML Critters ประเมิน CSS ที่สำคัญโดยการสร้าง DOM ทั้งหมดใหม่และประเมินตัวเลือก CSS เพื่อค้นหาโหนดที่ตรงกัน โดยปกติแล้วสิ่งนี้จะใช้งานได้ดีเนื่องจาก critters มีน้ำหนักเบาและรวดเร็ว

สำหรับบางกรณีอินพุต HTML อาจมีขนาดใหญ่หรือซ้อนกันอย่างลึกล้ำซึ่งทำให้ DOM ที่สร้างขึ้นใหม่นั้นมีขนาดใหญ่ขึ้นมากซึ่งจะทำให้การสร้าง CSS ที่สำคัญช้าลง Critters ไม่ได้ตระหนักถึงขนาดของ Viewport และโหนดเฉพาะที่อยู่เหนือการพับเนื่องจากไม่มีเบราว์เซอร์ที่ไม่มีหัว

เพื่อเอาชนะปัญหานี้ได้ใช้ประโยชน์จาก ภาชนะบรรจุสัตว์เลื้อยคลาน

คอนเทนเนอร์ Critters เลียนแบบ Viewport และสามารถเปิดใช้งานได้โดยการเพิ่ม data-critters-container ลงในคอนเทนเนอร์ระดับบนสุดที่มีองค์ประกอบ HTML เหนือการพับ

คุณสามารถประเมินเนื้อหาของ Viewport ของคุณได้อย่างคร่าวๆและเพิ่ม <div data-critters-container > รอบเนื้อหา

 <html>
  <body> <div class = "container"> <div data-critters-container>/ * html ภายในคอนเทนเนอร์นี้ใช้เพื่อประเมิน CSS ที่สำคัญ */</div>/ * HTML เมื่อประเมิน CSS */</</</</</</</</</</</ div> <footer> </footer>
  </body> </html>

หมายเหตุ: นี่เป็นวิธีที่ง่ายในการปรับปรุงประสิทธิภาพของสัตว์เลื้อยคลาน

คนตัดไม้

อินเทอร์เฟซ Logger ที่กำหนดเอง:

ประเภท: วัตถุ

คุณสมบัติ

ฟังก์ชั่น trace (สตริง) พิมพ์ข้อความติดตาม
ฟังก์ชั่น debug (สตริง) พิมพ์ข้อความการดีบัก
ฟังก์ชัน info (สตริง) พิมพ์ข้อความข้อมูล
ฟังก์ชัน warn (สตริง) พิมพ์ข้อความเตือน
ฟังก์ชัน error (สตริง) พิมพ์ข้อความแสดงข้อผิดพลาด

เล็ง

ควบคุมระดับบันทึกของปลั๊กอิน ระบุระดับที่คนบันทึกควรใช้ คนตัดไม้จะไม่สร้างเอาต์พุตสำหรับระดับบันทึกใด ๆ ภายใต้ระดับที่ระบุ ระดับและคำสั่งที่มีอยู่คือ:

"ข้อมูล" (ค่าเริ่มต้น)
"เตือน"
"ข้อผิดพลาด"
"ติดตาม"
"ดีบัก"
"เงียบ"

preloadstrategy

กลไกในการใช้สำหรับสไตล์ชีทที่ขี้เกียจ

หมายเหตุ: JS หมายถึงกลยุทธ์ที่ต้องใช้ JavaScript (กลับไปที่ <noscript> เว้นแต่จะปิดใช้งาน)

ค่าเริ่มต้น: ย้ายลิงก์สไตล์ชีทไปยังส่วนท้ายของเอกสารและแทรกแท็กเมตาโหลดล่วงหน้าในสถานที่ของพวกเขา
"body": ย้ายลิงค์สไตล์ภายนอกทั้งหมดไปยังจุดสิ้นสุดของเอกสาร
"Media": Load Stylesheets แบบอะซิงโครนัสโดยการเพิ่ม media="not x" และลบออกเมื่อโหลด JS
"swap": แปลงลิงก์สไตล์ชีทเป็น preloads ที่แลกเปลี่ยนเป็น rel="stylesheet" เมื่อโหลด (รายละเอียด) JS
"swap-high": ใช้ <link rel="alternate stylesheet preload"> และ swap เป็น rel="stylesheet" เมื่อโหลด (รายละเอียด) JS
"JS": แทรกตัวโหลด CSS แบบอะซิงโครนัสคล้ายกับ loadCss และใช้เพื่อโหลดสไตล์ชีท JS
"JS-Lazy": เช่น "js" แต่สไตล์ชีทจะถูกปิดใช้งานจนกว่าจะโหลดเต็ม
FALSE: ปิดใช้งานการเพิ่มแท็กล่วงหน้า