Thu gọn CSS
Giảm dung lượng file CSS và xem chính xác bạn tiết kiệm được bao nhiêu.
Chạy ngay trên trình duyệt. Không có gì bạn nhập vào bị gửi đi đâu cả.
- Hiện số byte tiết kiệm
- Xóa chú thích
- Không tải gì lên
Cách thu gọn CSS
- Dán CSS của bạn.
- Xem dung lượng tiết kiệm được ở dòng thống kê.
- Sao chép hoặc tải CSS đã thu gọn.
Những gì bị loại bỏ
- Chú thích viết dạng /* ... */
- Khoảng trắng và ngắt dòng giữa các rule và khai báo
- Dấu chấm phẩy thừa ngay trước dấu ngoặc nhọn đóng
- Rule trùng lặp hoặc dư thừa, ở những chỗ csso có thể gộp an toàn
- Dấu chấm phẩy thừa và khối rule bị bỏ trống không có khai báo nào bên trong
Mức tiết kiệm dung lượng thường gặp
| Điểm xuất phát | Nhỏ lại khoảng bao nhiêu |
|---|---|
| CSS viết tay có chú thích | 20 đến 30% |
| CSS đã gọn sẵn | 5 đến 10% |
| CSS do một preprocessor tạo ra | 10 đến 20% |
Khi nào nên thu gọn, và khi nào không
- Thu gọn ngay trước khi deploy, không phải trong lúc đang chỉnh sửa, vì một stylesheet dễ đọc debug nhanh hơn nhiều.
- Bỏ qua việc thu gọn một file đã được phục vụ dạng gzip và đã nhỏ sẵn, nơi chênh lệch dung lượng không đáng bước build thêm.
Khi nào thu gọn tạo khác biệt lớn nhất
- Stylesheet dùng chung cho nhiều trang, vì số byte tiết kiệm nhân lên theo mỗi lần tải trang.
- Design system hay thư viện component lớn có nhiều rule lặp lại, gộp được.
- Trang web không có build pipeline, nơi CSS viết tay được phục vụ trực tiếp mà không qua bước thu gọn nào khác.
- Một CSS framework được cắt gọn chỉ còn các utility class thực sự dùng trên trang.
Câu hỏi thường gặp về Thu gọn CSS
CSS của tôi sẽ nhỏ lại bao nhiêu?
Thường là 10 đến 30%, nhiều hơn nếu bản gốc có nhiều chú thích và khoảng trắng, ít hơn nếu nó đã gọn sẵn.
Thu gọn có làm thay đổi giao diện trang của tôi không?
Không. Thu gọn chỉ xóa khoảng trắng, chú thích và cú pháp dư thừa. Các quy tắc áp dụng cho trang của bạn vẫn giữ nguyên.
Công cụ có gộp các rule trùng lặp không?
Có, khi việc đó an toàn để làm, giúp giảm dung lượng file hơn nữa so với chỉ xóa khoảng trắng.
Tôi có nên giữ lại file gốc không?
Có. Hãy giữ bản dễ đọc để chỉnh sửa và chỉ dùng bản đã thu gọn ở production.
Công cụ này dùng bộ thu gọn nào?
csso, cùng bộ thu gọn CSS được vài plugin bundler dùng. Nó cũng gộp một số rule trùng lặp và dư thừa, không chỉ xóa khoảng trắng.
CSS đã thu gọn có còn an toàn để dán vào một stylesheet không?
Có, đó vẫn là CSS chuẩn chỉ bị bỏ khoảng trắng. Bất kỳ trình duyệt hay công cụ build nào đọc nó đều giống hệt bản gốc.
Công cụ có xóa các tiền tố vendor tôi vẫn cần, như -webkit-, không?
Không. Thuộc tính và giá trị có tiền tố vendor được giữ nguyên y hệt. Thu gọn chỉ xóa khoảng trắng, chú thích và các rule có thể gộp an toàn, không bao giờ đụng đến một thuộc tính mà CSS của bạn thực sự khai báo.
Custom property CSS (biến) sẽ ra sao?
Chúng được giữ nguyên, kể cả tên -- và giá trị, vì thu gọn không đổi tên hay phân giải custom property.