Trình rút gọn CSS — Bộ nén miễn phí trong trình duyệt

Tại Việt Nam, các nhóm front-end tại Tiki, VnExpress và VinGroup coi rút gọn CSS là bước bắt buộc trước khi triển khai vì Google Lighthouse phạt các stylesheet chưa nén. Một trang Next.js hay Nuxt.js điển hình tiết kiệm 20 đến 40% CSS thủ công sau khi xóa chú thích, thụt lề và dạng hex dài dòng. CDN tính phí theo byte đã truyền, vì vậy cắt giảm CSS trực tiếp ảnh hưởng đến hóa đơn hạ tầng của các công ty thương mại điện tử. Chạy bước này trong tab trình duyệt trước khi commit giúp bỏ qua việc cài PostCSS và cho cùng số byte.

Cách rút gọn CSS hoạt động

Bộ rút gọn duyệt qua stylesheet của bạn bằng một tokenizer nhận biết trạng thái, phân biệt các vùng cần bảo vệ (chuỗi ký tự và giá trị url()) với khoảng trắng có thể chỉnh sửa nơi việc thu gọn và xóa là an toàn.

Bảo vệ chuỗi và URL. Trước bất kỳ biến đổi nào khác, tokenizer xác định mọi chuỗi có dấu nháy (“…” hoặc '…') và mọi đối số url(…) rồi lưu lại nguyên văn. Các lượt duyệt tiếp theo không bao giờ chạm vào các byte này, vì vậy URL background-image có khoảng trắng hoặc thuộc tính content có dấu câu được giữ nguyên chính xác.
Xóa chú thích. Các khối /* … */ bị xóa khi nút gạt được bật. Nếu nút gạt chú thích giấy phép cũng được bật, các khối /*! … */ tồn tại để tiêu đề giấy phép MIT, Apache và BSD vẫn có trong đầu ra theo yêu cầu của các giấy phép đó.
Thu gọn khoảng trắng. Mọi chuỗi dấu cách, tab và xuống dòng thu gọn thành một dấu cách duy nhất, rồi khoảng trắng xung quanh các ký tự cấu trúc CSS {, }, ;, : và , bị xóa hoàn toàn. Danh sách selector và giá trị tái bố cục theo cách bộ phân tích trình duyệt đọc chúng.
Tối ưu hóa giá trị. Các lượt tùy chọn chuyển mã màu hex sang chữ thường, thu gọn cặp kênh hex 6 chữ số thành dạng viết tắt 3 chữ số (#aabbcc → #abc), và xóa đơn vị chiều từ giá trị zero (0px → 0). Lượt xóa đơn vị zero bỏ qua các giá trị bên trong lệnh gọi transform() nơi đơn vị có ý nghĩa.
Báo cáo lượng byte tiết kiệm. Cả văn bản gốc lẫn văn bản đã rút gọn đều được đo bằng new TextEncoder().encode(…).byteLength, đúng số byte UTF-8 mà CDN hay máy chủ HTTP sẽ thấy trên đường truyền. Thanh số liệu hiển thị kích thước gốc, kích thước rút gọn, byte đã tiết kiệm và phần trăm tiết kiệm.

Tại sao rút gọn CSS

Tải render-blocking nhanh hơn. Trình duyệt sẽ không vẽ một pixel nào cho đến khi hoàn thành phân tích CSS. Cắt 30% stylesheet rút ngắn khoảng chặn đó, nâng First Contentful Paint và phản ánh trực tiếp vào điểm Lighthouse Performance.
Hóa đơn egress CDN thấp hơn. CloudFront, Cloudflare và Fastly đều tính phí theo gigabyte egress. Cắt 20% một stylesheet gửi trên mọi lượt xem trang trở thành một dòng thực sự trên hóa đơn khi lưu lượng hàng tháng vượt vài triệu lượt xem.
CSS nhúng và email nhỏ hơn. Template email giao dịch inline CSS để hoạt động với quirk render của Outlook và Gmail, và mỗi byte thêm đưa bạn gần hơn đến ngưỡng cắt 102 KB của Gmail. Rút gọn trước khi inline giữ tin nhắn dưới giới hạn.
Không phụ thuộc build-tool. Các công việc một lần nhanh chóng, repo cũ không có build pipeline, và môi trường air-gapped không phải lúc nào cũng có chỗ cho Node toolchain. Bạn có thể chạy lượt này ở đây mà không cần cài PostCSS, cssnano hay bất kỳ thứ gì khác.

Ứng dụng phổ biến

Rút gọn CSS xuất hiện ở cuối hầu hết mọi build pipeline front-end và trong một số bối cảnh runtime nơi byte quan trọng.

Pipeline build sản xuất: Webpack, Vite, Rollup và Parcel đều có bước rút gọn CSS trong mặc định chế độ sản xuất. Chạy lượt này ở đây trước khi commit cho phép bạn xác thực đầu ra mà không kích hoạt toàn bộ build.
Nhúng CSS vào thẻ <style>: các framework server-rendered inline critical CSS vào tài liệu HTML hưởng lợi từ cùng lượng byte tiết kiệm như stylesheet độc lập, và CSS inline nhỏ hơn giảm Time to First Byte.
Email giao dịch và marketing: HTML email inline toàn bộ CSS, vì vậy mỗi kilobyte trong stylesheet cộng vào tổng kích thước tin nhắn. Rút gọn trước khi inline giữ tin nhắn dưới giới hạn kích thước ESP.

Ví dụ thực tế

Dán một bộ quy tắc 1 KB với thụt lề hai dấu cách, dòng trống giữa các selector, một khối chú thích giấy phép ở đầu và màu hex dài dòng như #FFFFFF cùng margin có padding-zero như margin: 0px. Với mọi tùy chọn được bật, đầu ra thu gọn xuống khoảng 600 byte — tiết kiệm 40% — trong khi trang được render trông giống từng byte với nguồn.

Rút gọn có thay đổi hành vi CSS của tôi không?

Không, với các nút gạt mặc định. Bộ rút gọn chỉ xóa các byte mà bộ phân tích CSS đã bỏ qua — khoảng trắng, chú thích, dấu chấm phẩy cuối tùy chọn — và bỏ qua bên trong transform() nơi đơn vị có ý nghĩa. Mọi selector, thuộc tính và giá trị đều được giữ nguyên.

Có hoạt động với SCSS hay LESS không?

Chỉ sau khi bạn biên dịch chúng thành CSS thuần túy. Cú pháp SCSS và LESS (biến, lồng nhau, mixin, selector cha &) không phải CSS hợp lệ và bộ rút gọn sẽ làm hỏng nó. Biên dịch nguồn preprocessor trước, rồi dán đầu ra đã biên dịch vào đây.

Tại sao chú thích giấy phép của tôi bị xóa?

"Xóa chú thích" được bật theo mặc định và xóa mọi khối /* … */. Bật "Giữ chú thích giấy phép /*!" để giữ các khối bắt đầu bằng /*!. MIT, Apache và BSD đều yêu cầu tiêu đề bản quyền phải đi kèm với CSS được phân phối lại.

Có thể tiết kiệm được bao nhiêu?

CSS viết tay thường giảm 15 đến 35%. Các file có nhiều chú thích hoặc thụt lề sâu với nhiều màu sắc nghĩa đen có thể đạt 40%. Đầu ra được biên dịch từ Sass hay CSS-in-JS thường đã được rút gọn một phần và tiết kiệm ít hơn — thường 5 đến 15%.

Chạy rút gọn CSS trong tab trình duyệt và bạn bỏ qua hoàn toàn Node toolchain. Dán stylesheet ở trên, bật các tùy chọn để phù hợp với mức độ tích cực bạn muốn, rồi sao chép đầu ra hoặc tải xuống dưới dạng .min.css. Không tải lên, không tài khoản, không thư viện vendor.

Rút gọn CSS _

// Công cụ liên quan