Thu gọn JS & CSS
Dán mã và bản thu gọn hiện ra ngay khi bạn gõ — kèm số ký tự đã tiết kiệm.
Kết quả đã thu gọn
Cách sử dụng
- Dán JavaScript hoặc CSS vào ô — bản thu gọn hiện ra ngay khi bạn gõ, không có nút nào cần bấm.
- Để cú pháp ở Tự động, hoặc tự chọn JavaScript / CSS nếu việc nhận diện đoán sai; kết quả hiển thị lại ngay.
- Phần đầu hiển thị số ký tự tiết kiệm trước → sau. Sao chép kết quả hoặc tải xuống dưới dạng tệp .js / .css.
Ví dụ
Đầu vào
// Cart total with the free-shipping badge const TAX = 0.08; function total(items, coupon) { let sum = 0; for (const item of items) { sum += item.price * item.qty; } if (coupon) { sum -= coupon; } return { amount: sum * (1 + TAX), freeShipping: sum > 50 }; }
Đã thu gọn
const TAX=0.08;function total(items,coupon){let sum=0;for(const item of items){sum+=item.price*item.qty;}if(coupon){sum-=coupon;}return{amount:sum*(1+TAX),freeShipping:sum>50};}
Chú thích đã bị bỏ và khoảng trắng được gộp, nhưng mọi định danh giữ nguyên tên và mọi literal giữ đúng cách viết. Phần đọc kết quả ghi 279 → 177 ký tự (−37%).
Quy tắc, giới hạn và các vấn đề đã biết
- Chỉ xử lý khoảng trắng và chú thích. Không gì bị đổi tên, không câu lệnh nào bị gộp và không mã nào bị xóa — nên kết quả thu gọn hành xử như bản gốc, nhưng lớn hơn so với kết quả của Terser.
- Chú thích bắt đầu bằng /*! hoặc //!, và chú thích có chứa @license hay @preserve, được giữ lại; mọi chú thích khác bị xóa.
- Xuống dòng được giữ ở mọi nơi mà việc bỏ nó sẽ làm thay đổi chương trình: sau return / throw / break / continue / yield / async, và giữa hai câu lệnh mà JavaScript sẽ tự chèn dấu chấm phẩy (a\nb, x={}\nfoo()). Phần lớn mã khác cho ra một dòng.
- JavaScript được tách token chứ không được phân tích: "/*" bên trong chuỗi, biểu thức chính quy hay template literal không bao giờ bị chạm tới. Phép chia và biểu thức chính quy được phân biệt nhờ token trước đó; một regex trải qua nhiều dòng bị coi là phép chia.
- CSS chỉ mất những khoảng trắng không thể mang nghĩa: quanh { } ; , > ~ ! và sau ":", cùng dấu ";" cuối trước một "}". Khoảng trắng giữa bộ chọn cha và bộ chọn con vẫn giữ (.a .b không thành .a.b), dấu cách trước ":" vẫn giữ (a :hover không thành a:hover), và calc(100% - 10px) giữ khoảng trắng vì chúng là một phần của cú pháp.
- Không đổi tên (mangle), không loại bỏ mã chết, không drop_console: những việc đó làm thay đổi hành vi, điều mà một nút “thu gọn” không nên âm thầm làm.
- Không hỗ trợ: HTML/SVG (khoảng trắng ở đó phụ thuộc <pre>, <textarea> và phần tử nội tuyến), viết lại ở mức kiểu của TypeScript, đầu vào JSX/TSX, source map và gộp nhiều tệp. JSX được nhận diện và gắn cảnh báo.
- Một chuỗi, template, chú thích hoặc url( chưa đóng ở cuối đầu vào là cảnh báo, không phải lỗi: phần còn lại của mã vẫn được thu gọn. Dấu ngoặc không cân cũng là cảnh báo — đây không phải công cụ kiểm tra.
- Số đọc đếm theo điểm mã Unicode, không theo byte và không theo đơn vị UTF-16; phần trăm được làm tròn đến số nguyên và hiển thị dạng +n% khi kết quả lớn hơn. Mọi thứ chạy trong trình duyệt: không gì được tải lên, lưu lại hay thêm vào URL.
- Trên 200.000 ký tự, kết quả cập nhật khoảng 0,6 giây sau khi bạn ngừng gõ; văn bản không bao giờ bị cắt bớt. Đầu ra dùng LF và không có dòng mới ở cuối.
Công cụ liên quan
Những việc thường cần làm tiếp sau khi mã đã nhỏ gọn.