ความครอบคลุมของ CSS และรูปแบบที่ไม่ได้ใช้
ระบุและลบ CSS ที่ไม่ได้ใช้ด้วยแผง Coverage ใน DevTools และเครื่องมือตัดโค้ดอย่าง PurgeCSS
ความครอบคลุมของ CSS และรูปแบบที่ไม่ได้ใช้ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ปัญหา CSS ที่ไม่ได้ใช้
ไฟล์ CSS ขนาดใหญ่มักมีสไตล์สำหรับส่วนประกอบที่ไม่มีอยู่ในหน้าปัจจุบัน ทุกไบต์ที่ไม่ได้ใช้จะเพิ่มเวลาแยกวิเคราะห์ เวลาในการสร้าง CSSOM และขนาดข้อมูลที่ถ่ายโอน แอปพลิเคชันที่ใช้งานจริงโดยทั่วไปอาจมี CSS ที่ไม่ได้ใช้ถึง 90% หรือมากกว่านั้นในแต่ละหน้า
การครอบคลุมของ Chrome DevTools
เปิด Chrome DevTools → แผงการครอบคลุม (Cmd+Shift+P → การครอบคลุม) เริ่มบันทึก โต้ตอบกับหน้าเว็บ แล้วหยุดบันทึก แผงนี้จะแสดงไฟล์ CSS แต่ละไฟล์พร้อมเปอร์เซ็นต์ที่ถูกใช้ และเน้นกฎที่ไม่ได้ใช้ด้วยสีแดง ส่งออกข้อมูลการครอบคลุมเป็น JSON เพื่อวิเคราะห์
PurgeCSS
PurgeCSS จะสแกนไฟล์ HTML, JS และไฟล์แม่แบบเพื่อค้นหาชื่อคลาส แล้วลบกฎ CSS ที่ไม่ได้ใช้ กำหนดรูปแบบการจับคู่เนื้อหาให้ครอบคลุมไฟล์ทั้งหมดที่อาจอ้างอิงชื่อคลาส เพิ่มคลาสที่ใช้แบบไดนามิกโดย JS ลงในรายการยกเว้น เพื่อป้องกันการลบโดยไม่ตั้งใจ
Tailwind CSS JIT
คอมไพเลอร์ JIT ของ Tailwind จะสร้างเฉพาะคลาสยูทิลิตีที่มีการใช้งานจริงในแม่แบบ ผลลัพธ์คือ CSS ขนาดเล็กมาก ซึ่งมักมีขนาดเพียง 5–15KB สำหรับแอปพลิเคชันเต็มรูปแบบ เนื่องจากยูทิลิตีที่ไม่ได้ใช้จะไม่ถูกสร้างขึ้นเลย นี่คือผลลัพธ์ในอุดมคติของการล้าง CSS ที่ไม่ได้ใช้
การกำหนดค่า PurgeCSS
ในไฟล์กำหนดค่า webpack หรือ Vite ให้เพิ่ม PurgeCSS พร้อมรูปแบบการจับคู่เนื้อหาที่ครอบคลุมไฟล์แม่แบบทั้งหมด ตัวเลือกรายการยกเว้นรองรับข้อความ นิพจน์ regex และรายการยกเว้นแบบเจาะลึกสำหรับรูปแบบคลาสแบบไดนามิกที่ซับซ้อนจากไลบรารีอย่าง Headless UI
ข้อได้เปรียบของ CSS Modules
CSS Modules จะสร้างชื่อคลาสที่ไม่ซ้ำกันสำหรับแต่ละไฟล์ และตัดโมดูลที่ไม่ได้ใช้ออกตามการกำหนดค่าของตัวรวมชุด มีเพียงโมดูล CSS ที่นำเข้าเท่านั้นที่จะรวมอยู่ในชุดรวม การวางส่วนประกอบและสไตล์ไว้ด้วยกันจึงช่วยกำจัดสไตล์ส่วนกลางที่ไม่ได้ใช้โดยธรรมชาติ
การแยก CSS ตามเส้นทาง
แยก CSS ตามเส้นทางในเฟรมเวิร์กอย่าง Next.js (การแยก CSS รายหน้า) หรือใช้การนำเข้าแบบไดนามิกร่วมกับโมดูล CSS แต่ละหน้าจะโหลดเฉพาะสไตล์ของตนเอง ทำให้การวิเคราะห์การครอบคลุมแยกตามหน้าแทนที่จะรวมทั้งแอปพลิเคชันมีความหมายมากขึ้น
การวัดด้วย Lighthouse
การตรวจสอบ "ลด CSS ที่ไม่ได้ใช้" ของ Lighthouse จะประเมินจำนวนไบต์ที่อาจประหยัดได้จากการลบกฎที่ไม่ได้ใช้ และระบุทรัพยากรสไตล์ชีตที่มีเปอร์เซ็นต์การไม่ได้ใช้สูง ใช้ข้อมูลนี้เป็นแนวทางในการจัดลำดับความสำคัญว่าไฟล์ใดควรตรวจสอบก่อน
การครอบคลุมสถานะแบบไดนามิก
การวิเคราะห์การครอบคลุมจะบันทึกเฉพาะสถานะที่มองเห็นระหว่างการบันทึกเท่านั้น ต้องเรียกใช้สถานะโฮเวอร์ สถานะที่เปิดหน้าต่างโมดัล สถานะข้อผิดพลาด และสถานะที่ผ่านการยืนยันตัวตนด้วยตนเองระหว่างการบันทึกการครอบคลุม เพื่อหลีกเลี่ยงการล้างสไตล์ของสถานะเหล่านั้นโดยไม่ถูกต้อง
CSS แบบรวมเทียบกับ CSS รายส่วนประกอบ
สไตล์ชีตส่วนกลางแบบรวมจะสะสม CSS ที่ไม่ได้ใช้เมื่อเวลาผ่านไปหลังจากนำคุณลักษณะต่าง ๆ ออก CSS รายส่วนประกอบ เช่น โมดูล CSS, ส่วนประกอบที่จัดรูปแบบ และยูทิลิตีของ Tailwind จะล้างได้ง่ายกว่า เพราะสไตล์อยู่คู่กับส่วนประกอบของตนเองและถูกนำออกไปพร้อมกัน
การตรวจสอบโค้ดเบสเก่า
สำหรับไฟล์ CSS เก่าขนาดใหญ่ ให้ใช้ UnCSS หรือ PurgeCSS ในโหมดรายงานเท่านั้นก่อน จัดเรียงกฎตามความถี่ในการใช้งาน แยกและลบสไตล์ของปลั๊กอินจากผู้จำหน่ายที่ไม่ได้ใช้อย่างชัดเจน ดำเนินการทีละขั้นเพื่อหลีกเลี่ยงการลบสไตล์ของสถานะกรณีขอบโดยไม่ตั้งใจ
ตรวจสอบความรู้
แผงการครอบคลุมของ Chrome DevTools วัดอะไร
สรุป
การวิเคราะห์การครอบคลุม CSS ด้วยแผงการครอบคลุมของ DevTools และ Lighthouse ช่วยระบุกฎที่ไม่ได้ใช้ PurgeCSS และ Tailwind JIT ช่วยกำจัดโค้ดที่ไม่ได้ใช้โดยอัตโนมัติ CSS Modules และการแยกตามเส้นทางช่วยป้องกันการสะสมของสไตล์ที่ไม่ได้ใช้ ทั้งหมดนี้ช่วยลดขนาดข้อมูล CSS และเวลาแยกวิเคราะห์ให้เหลือน้อยที่สุด
คำถามที่พบบ่อย
บทเรียน “ความครอบคลุมของ CSS และรูปแบบที่ไม่ได้ใช้” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ความครอบคลุมของ CSS และรูปแบบที่ไม่ได้ใช้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ความครอบคลุมของ CSS และรูปแบบที่ไม่ได้ใช้”
ระบุและลบ CSS ที่ไม่ได้ใช้ด้วยแผง Coverage ใน DevTools และเครื่องมือตัดโค้ดอย่าง PurgeCSS คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ความครอบคลุมของ CSS และรูปแบบที่ไม่ได้ใช้” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- CSS สำคัญและการบล็อกการแสดงผล
- การจัดวาง การวาด และการประกอบ: กระบวนการแสดงผล
- will-change และการเลื่อนระดับเลเยอร์
- ความครอบคลุมของ CSS และรูปแบบที่ไม่ได้ใช้