Nén và Định Dạng JavaScript

Công Cụ Này Là Gì?

Trình nén JavaScript viết lại code sao cho nhỏ nhất có thể trong khi hành vi vẫn giữ nguyên: nó rút gọn tên biến và hàm khi an toàn, loại bỏ comment và khoảng trắng, gộp các hằng số, và loại bỏ code không bao giờ chạy tới.

Công cụ này xây dựng trên Terser, bộ nén dựa trên AST được webpack, Vite, Rollup và hầu hết các công cụ build JavaScript hiện đại sử dụng. Vì nó thực sự phân tích code của bạn thay vì đối chiếu văn bản theo mẫu, nó phân biệt đúng giữa toán tử chia và một regex literal, không làm hỏng template string chứa chuỗi trông giống //, và sẽ không đổi tên một biến thành tên trùng với thứ gì đó ở phạm vi ngoài.

Tại Sao Nên Dùng?

• Nén dựa trên AST (Terser), cùng engine được các bundler lớn sử dụng — an toàn với regex literal, template string và closure.
• Rút gọn tên biến để tiết kiệm dung lượng thực sự, không chỉ loại bỏ khoảng trắng.
• Xem chính xác số byte và phần trăm bạn đã tiết kiệm được.
• Chế độ Format biến JS đã nén, tối nghĩa trên một dòng trở lại thành code có thu lề, dễ đọc — hữu ích để hiểu script của bên thứ ba.
• Xử lý 100% cục bộ — code độc quyền của bạn không bao giờ rời khỏi trình duyệt.

Cách Sử Dụng

1. Dán JavaScript vào ô nhập, hoặc nhấn "Load Example" để thử một mẫu có regex literal và template string.
2. Nhấn "Minify" để nén, hoặc "Format" để làm đẹp với thu lề 2 khoảng trắng.
3. Xem thông báo bên dưới các ô — chế độ minify hiển thị mức giảm dung lượng; lỗi cú pháp trong code sẽ hiển thị thông báo rõ ràng thay vì âm thầm tạo ra kết quả hỏng.
4. Nhấn "Copy" để lấy kết quả.

Ví dụ

Đầu vào

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

Đầu ra

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

Tên biến được rút gọn, comment và câu lệnh if được gộp thành một biểu thức, nhưng regex literal và template string được giữ nguyên chính xác và hành vi không thay đổi.

Mẹo thực tế

• Nén khi build, không phải chỉnh sửa thủ công — giữ source dễ đọc trong version control và tạo bundle đã nén như một bước build.
• Nếu kết quả đã nén hoạt động bất thường, kiểm tra code phụ thuộc vào Function.prototype.name hoặc reflection — việc rút gọn tên đổi tên hàm và điều đó có thể lộ ra trong một số trường hợp hiếm.
• Định dạng lại một script của bên thứ ba trước khi đọc nhanh hơn nhiều so với cố gắng phân tích một dòng dài 2.000 ký tự.
• Kết hợp với công cụ nén HTML và CSS bên dưới nếu bạn đang chuẩn bị một bundle tĩnh hoàn chỉnh để triển khai.

Ứng dụng trong quy trình làm việc thực tế

JavaScript thường là tài nguyên chặn hiển thị hoặc chặn phân tích lớn nhất trên một trang, nên việc nén nó có tác động thực sự, đo lường được đến thời gian tải — hơn cả HTML hay CSS nếu so từng byte. Hầu hết framework hiện đại tự động làm việc này khi build, nhưng script viết tay, extension trình duyệt và bookmarklet thường được phát hành chưa nén trừ khi có ai đó chạy qua một công cụ như thế này.

Chiều Format thường được dùng theo hướng ngược lại: gỡ lỗi một lỗi production từ một stack trace đã nén sẽ dễ hơn nhiều khi code xung quanh được định dạng lại và dễ đọc, dù không còn tên biến gốc.

→ Nén HTML · Nén CSS

Các trường hợp sử dụng phổ biến

• Giảm dung lượng một script độc lập hoặc bookmarklet trước khi công bố.
• Định dạng lại một script đã nén lấy từ một trang thực tế để hiểu nó làm gì.
• Dọn dẹp JavaScript dán từ một bài đăng diễn đàn hoặc đoạn code do AI tạo ra trước khi đọc kỹ.
• Kiểm tra nhanh xem một đoạn JS viết tay có lỗi cú pháp hay không, vì lỗi phân tích sẽ hiện ra thành một thông báo rõ ràng.

Câu Hỏi Thường Gặp