Rút gọn JavaScript & CSS

Công cụ này làm gì

Rút gọn (minify) loại bỏ mọi thứ mà trình duyệt không cần để chạy code của bạn: khoảng trắng, dấu xuống dòng, chú thích và tên dài. Tệp nhỏ hơn tải nhanh hơn, giúp cải thiện thời gian tải trang và Core Web Vitals, đặc biệt trên mạng di động.

Công cụ này rút gọn JavaScript bằng Terser, trình rút gọn được webpack, Rollup và Vite sử dụng, và CSS bằng CSSO, công cụ còn tái cấu trúc stylesheet: rút ngắn mã màu (#ffffff thành #fff), bỏ đơn vị và giá trị thừa (0px 0px thành 0), và gộp các quy tắc có chung selector hoặc khai báo.

Cách sử dụng

1. Dán code vào ô Đầu vào, thả tệp .js hoặc .css vào đó, hoặc nhấn Ví dụ.
2. Chọn JavaScript hoặc CSS.
3. Với JavaScript, Rút ngắn tên biến đổi tên biến cục bộ và tham số thành một chữ cái. Tên được export và tên toàn cục không bao giờ bị thay đổi.
4. Với CSS, Gộp các quy tắc trùng lặp kết hợp các quy tắc có cùng khai báo.
5. Sao chép hoặc tải kết quả xuống. Bộ đếm kích thước dưới mỗi ô cho thấy bạn đã tiết kiệm được bao nhiêu.

Nếu JavaScript có lỗi cú pháp, thông báo lỗi sẽ hiển thị dòng và cột để bạn nhảy tới đó.

Ví dụ

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

trở thành

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

Khi nào nên dùng

Hãy dùng nó cho những việc nhanh, làm một lần: một đoạn code cho CDN, một script nội tuyến trong email HTML, một bookmarklet, hoặc để xem một thư viện có thể nhỏ đến mức nào. Trong dự án thực tế, bundler của bạn nên rút gọn ở mỗi lần build để mã nguồn vẫn dễ đọc.