CSS Minifier

สิ่งที่ minifier ทำ

การแปลง (ไม่เปลี่ยนพฤติกรรมเลย):

• ตัดคอมเมนต์ทั้งหมด รวมถึงบล็อก /*! ของ license
• ตัดช่องว่างที่ไม่จำเป็น (ระหว่าง selector, การประกาศ, วงเล็บปีกกา)
• ลบอัฒภาคท้ายก่อนวงเล็บปีกกาปิด
• ยุบกฎหลายบรรทัดให้เป็นบรรทัดเดียว

ทำแค่นี้เอง จึงทำให้ผลลัพธ์ทำงานเหมือนต้นฉบับทุกประการ: selector, พร็อพเพอร์ตี และค่าทุกอย่างยังคงตามที่คุณเขียน

การประหยัดทั่วไป

นอกเหนือจากการย่อขนาด การบีบอัด gzip ที่เซิร์ฟเวอร์ยังประหยัดเพิ่มอีก 60-80% เพราะ CSS ซ้ำซ้อนสูง ทั้งสองวิธีซ้อนทับกันได้ ทำทั้งคู่เสมอ

สิ่งที่การย่อขนาดไม่ทำ

• ลบ CSS ที่ไม่ได้ใช้ นั่นเป็นเรื่องของ tree-shaking / PurgeCSS ซึ่งต้องวิเคราะห์ HTML หรือคอมโพเนนต์ของคุณ
• ย่อสีฐานสิบหก ยุบหน่วยศูนย์ หรือรวมการประกาศ การแปลงเชิงรุกเหล่านั้นเป็นงานของ cssnano, esbuild หรือ Lightning CSS ไม่ใช่เครื่องมือนี้
• รวม selector ที่ซ้ำให้เป็นอันเดียว เสี่ยงเพราะลำดับในต้นฉบับมีผลต่อ cascade minifier บางตัวพยายามทำ แต่ส่วนใหญ่ข้ามไป
• เปลี่ยนชื่อคลาส นั่นเป็น CSS-in-JS หรือ CSS Modules ไม่ใช่การย่อขนาด
• อินไลน์ critical CSS นั่นเป็นขั้นตอนแยกต่างหากตอน build

การคงคอมเมนต์ license

minifier จำนวนมากคงคอมเมนต์ที่ขึ้นต้นด้วย /*!, ใช้สำหรับส่วนหัว license:

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

เครื่องมือนี้ตัดคอมเมนต์ทั้งหมด หาก CSS ของคุณมีส่วนหัว license ให้เพิ่มกลับหลังย่อขนาด หรือใช้ build tool ที่มีตัวเลือกคง license ไว้ เช่น cssnano หรือ esbuild

Source map

สำหรับการดีบักในโปรดักชัน build tool จะสร้าง source map ควบคู่ไปกับผลลัพธ์ที่ย่อขนาด:

styles.min.css
styles.min.css.map

DevTools อ่าน map ได้และแสดงหมายเลขบรรทัดของต้นฉบับที่จัดรูปสวยงามเมื่อคุณตรวจสอบองค์ประกอบ เครื่องมือนี้ไม่สร้าง source map

การย่อขนาด CSS ใน build pipeline

• Vite, Webpack, Parcel: จัดการให้อัตโนมัติในการ build โปรดักชัน
• PostCSS กับ cssnano: minifier มาตรฐานแบบเดี่ยว
• esbuild: รวมการย่อขนาด CSS ไว้ด้วย
• preset ของ cssnano: default สำหรับการแปลงที่ปลอดภัย, advanced สำหรับเชิงรุก (พร้อมข้อแลกเปลี่ยนบางอย่าง)

เครื่องมือนี้เหมาะกับการย่อขนาดครั้งเดียว การแก้ไขด่วน และการเรียนรู้ว่า minifier ทำอะไรจริง ๆ สำหรับ workflow โปรดักชัน ให้ใช้เครื่องมือ build เพื่อให้ต้นฉบับยังอ่านง่ายและย่อขนาดเฉพาะผลลัพธ์

เมื่อใดที่การย่อขนาดอาจทำให้ CSS เสีย

พบยากแต่เป็นไปได้:

• selector ที่ไวต่อช่องว่าง: .foo .bar เทียบกับ .foo.bar, ช่องว่างมีผล
• ค่า custom property ที่มีช่องว่าง: --shadow: 0 2px 4px rgba(0,0,0,0.1), จุลภาคภายใน rgba() ต้องไม่ถูกตัด
• คอมเมนต์บล็อกที่ไม่ปิด: /* missing close กลืนทุกอย่างที่ตามมา minifier อาจทำงานผิดพลาดกับอินพุตที่ผิดรูป

วิธีแก้: รันผลลัพธ์ที่ย่อขนาดแล้วผ่าน lint/test ก่อนปล่อยใช้งานเสมอ