เครื่องมือบีบอัด CSS

การบีบอัด CSS คืออะไร?

การบีบอัด CSS คือกระบวนการลบอักขระที่ไม่จำเป็นทั้งหมดออกจาก stylesheet โดยไม่เปลี่ยนพฤติกรรม ซึ่งหมายถึงการตัดช่องว่าง การขึ้นบรรทัดใหม่ คอมเมนต์ และ syntax ที่ซ้ำซ้อน เช่น เซมิโคลอนท้ายและเครื่องหมายคำพูดที่ไม่จำเป็นออก เบราว์เซอร์แยกวิเคราะห์ CSS ที่บีบอัดแล้วเหมือนกับต้นฉบับทุกประการ W3C CSS Syntax Module กำหนดไวยากรณ์ไว้ว่าช่องว่างระหว่าง token เป็นเพียงตัวเลือก ยกเว้นที่คั่นระหว่าง identifier การบีบอัดใช้ประโยชน์จากนี้โดยลดทุกอย่างลงเหลือเฉพาะอักขระที่จำเป็น

เครื่องมือบีบอัด CSS ออนไลน์รับ stylesheet ที่จัดรูปแบบแล้วและสร้างเวอร์ชันที่กะทัดรัดซึ่งเหมาะสมสำหรับการส่งผ่านเครือข่าย โดยทั่วไปประหยัดได้ 15% ถึง 40% ขึ้นอยู่กับปริมาณช่องว่างและคอมเมนต์ในซอร์สโค้ด สำหรับ stylesheet ขนาด 50 KB นั่นหมายถึงลดขนาดได้ 7–20 KB ในทุกการโหลดหน้าเว็บ เมื่อใช้ร่วมกับการบีบอัด gzip หรือ Brotli บนเซิร์ฟเวอร์ การบีบอัด CSS จะลดขนาดการส่งสุดท้ายได้อีก เนื่องจากผลลัพธ์ที่บีบอัดแล้วของ CSS ที่บีบอัดแล้วมีขนาดเล็กกว่าการบีบอัดต้นฉบับที่จัดรูปแบบ

การบีบอัดเป็นขั้นตอนมาตรฐานใน build pipeline ของ front-end เครื่องมืออย่าง cssnano, clean-css และ esbuild รัน minification เป็นส่วนหนึ่งของกระบวนการ build แต่ในระหว่างการพัฒนา คุณมักต้องบีบอัด snippet เดี่ยวเพื่อทดสอบ แทรก CSS สำคัญแบบ inline หรือตรวจสอบว่า stylesheet หดตัวเท่าไรก่อนเพิ่มใน bundle config นี่คือจุดที่เครื่องมือบีบอัด CSS บนเบราว์เซอร์มีประโยชน์: วาง CSS รับผลลัพธ์ที่บีบอัดแล้ว คัดลอก และดำเนินการต่อ

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

ทำไมต้องใช้เครื่องมือบีบอัด CSS นี้?

วาง CSS ใดๆ แล้วรับผลลัพธ์ที่บีบอัดในเสี้ยววินาที ไม่ต้องตั้งค่า build tool ไม่ต้องใช้คำสั่ง CLI ไม่ต้องสร้างบัญชี

กรณีการใช้งานเครื่องมือบีบอัด CSS

เทคนิคการบีบอัด CSS

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

เปอร์เซ็นต์ที่ประหยัดได้แตกต่างกันตาม input ไฟล์ที่มีคอมเมนต์มากได้ประโยชน์จากการลบคอมเมนต์มากกว่า ส่วนไฟล์ที่บีบอัดแล้วได้ประโยชน์น้อยกว่า ผลลัพธ์ที่น่าเชื่อถือที่สุดมาจากการลบช่องว่างและการเพิ่มประสิทธิภาพ shorthand minifier ขั้นสูงอย่าง cssnano ยังรวม selector ที่ซ้ำกัน ยุบ property แบบ longhand เป็น shorthand (margin-top + margin-right + margin-bottom + margin-left เป็น margin) และลบ declaration ที่ถูกแทนที่ด้วย

การบีบอัด CSS กับ gzip Compression

การบีบอัด CSS และการบีบไฟล์เป็นสิ่งที่เสริมกัน ไม่ใช่ทดแทนกัน ทำงานในชั้นต่างกันและซ้อนทับกัน:

ตัวอย่างโค้ด

วิธีบีบอัด CSS ด้วยโปรแกรมในภาษาและสภาพแวดล้อมต่างๆ:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

คำถามที่พบบ่อย