Initializing, please wait a moment

Trình Rút Gọn CSS vs Uglifier vs Tree-Shaking

Cập nhật lần cuối: 2026-04-27. Mở trình rút gọn CSS để rút gọn trong trình duyệt mà không tải lên mã nguồn.

Đáp án 30 giây. Ba kỹ thuật giảm kích thước khác nhau nhằm cùng mục tiêu nhưng làm việc trên các lớp khác nhau. Trình rút gọn xóa khoảng trắng và chú thích. Uglifier đổi tên các ký hiệu (biến, tên hàm) thành dạng ngắn hơn. Tree-shaking loại bỏ mã mà phần còn lại của bundle không bao giờ dùng. Chúng xếp chồng: một bundle đã rút gọn-và-uglify đã tree-shake nhỏ hơn bất kỳ kỹ thuật đơn lẻ nào.

Trình rút gọn - khoảng trắng và chú thích

Trình rút gọn - khoảng trắng và chú thích: CSS Minifier bỏ ký tự trình duyệt bỏ qua - không đổi tên selector hay xóa rule không dùng như uglifier/tree-shaker.

Các trình rút gọn CSS hiện đại đi xa hơn khoảng trắng: gộp 0px thành 0, thay #ffffff bằng #fff, xóa giá trị mặc định dư thừa, gộp các bộ chọn kề có cùng luật. Mỗi cái cạo một phần trăm nhỏ; hiệu ứng tích lũy có ý nghĩa.

Uglifier - đổi tên để tiết kiệm byte

Uglifier - đổi tên để tiết kiệm byte: rút gọn định danh khi an toàn - ở CSS rủi ro hơn minify thuần vì class phải khớp HTML và runtime.

Uglifier yêu cầu hiểu quy tắc phạm vi của mã - bạn có thể đổi tên biến cục bộ tự do, nhưng đổi tên một biến toàn cục phá vỡ bất cứ gì phụ thuộc vào tên. Các công cụ như Terser, esbuild, và SWC làm điều này an toàn bằng cách phân tích đồ thị phạm vi.

Cho CSS, tương đương là đổi tên lớp. Các pipeline build hash lớp CSS thành .a, .b, .c tiết kiệm byte theo cùng cách - nhưng chỉ hoạt động khi HTML được dùng bằng cùng pipeline để các tham chiếu khớp.

Tree-shaking - xóa cái không ai dùng

Tree-shaking - xóa cái không ai dùng: build bỏ export không dùng sau phân tích - cần đồ thị module; chỉ CSS Minifier không shake được app.

Tree-shaking yêu cầu mã nguồn ở định dạng hỗ trợ phân tích - module ES gốc ("import" / "export") thay vì CommonJS ("require"). Tác giả thư viện đã dành nhiều năm di chuyển sang ESM cụ thể để làm tree-shaking hiệu quả cho người tiêu dùng của họ.

Cho CSS, tree-shaking có một song song gọi là PurgeCSS hay chế độ JIT của TailwindCSS: quét HTML và chỉ bao gồm luật CSS khớp tên lớp thực trong markup. Tailwind gửi hàng nghìn lớp tiện ích; build production chỉ bao gồm những cái đang dùng.

Cái nào dùng trước

Cái nào dùng trước là CSS Minifier cho stylesheet đã viết; tree-shaking trong build app; uglify là bước JS nâng cao, không phải sửa CSS đầu tiên.

Trình rút gọn CSS trên trang này xử lý bước đầu tiên - dán stylesheet và sao chép kết quả nén; không có gì rời khỏi thiết bị của bạn. Uglification và tree-shaking cần một build tool (webpack, esbuild hoặc Vite) có thể đọc toàn bộ đồ thị module.

Cho dự án không-bundle nơi bạn chỉ muốn stylesheet nhỏ hơn, chạy trình rút gọn CSS trên CSS cuối. Cho nội dung rộng hơn về các kỹ thuật này, xem trình rút gọn CSS vs trình nén hay cách rút gọn CSS và JS cho Cloud Run cold start. Bộ đầy đủ: hub công cụ lập trình viên.