Nén JavaScript (JS Minifier)

Dán JavaScript để thu nhỏ bằng Terser: mã chết bị loại bỏ, tên biến được rút gọn và khoảng trắng biến mất. Lỗi cú pháp được chỉ ra đúng dòng và cột.

Chạy trên trình duyệtKhông cần đăng kýKhông tải lên gì

Kết quả đã thu gọn

Cách dùng Nén JavaScript (JS Minifier)

  1. Dán JavaScript hoặc mở tệp .js.
  2. Chọn tùy chọn: Rút gọn tên biến làm ngắn biến cục bộ, Nén viết lại mã thành dạng tương đương nhỏ hơn, ES module cho phép import/export ở cấp cao nhất.
  3. Chọn phiên bản ECMAScript đích mà trình duyệt của người dùng hỗ trợ. ES2020 an toàn với mọi trình duyệt luôn cập nhật.
  4. Xem kích thước, mức tiết kiệm và ước tính gzip bên dưới kết quả.
  5. Sao chép mã đã nén hoặc tải xuống dưới tên output.min.js.

Công cụ nén JavaScript làm gì?

Nén (minify) làm JavaScript nhỏ hơn mà không thay đổi chức năng. Công cụ này dùng Terser, trình nén đứng sau webpack, Vite và Rollup, và áp dụng ba loại thay đổi:

  • Xóa khoảng trắng và chú thích: engine JavaScript không cần thụt lề, xuống dòng hay chú thích.
  • Rút gọn tên (mangling): tên biến cục bộ và tham số hàm như subtotal trở thành một chữ cái. Tên toàn cục và thuộc tính object được giữ nguyên để API công khai của bạn vẫn hoạt động.
  • Nén (compression): biểu thức hằng được tính sẵn, mã không thể chạy tới bị loại bỏ, câu lệnh if trở thành toán tử ba ngôi và hàm ngắn được inline.

Minify và gzip: có cần cả hai?

Có. Gzip và Brotli nén các mẫu byte lặp lại khi truyền qua mạng, còn minify loại bỏ những byte mà trình duyệt lẽ ra phải tải về, phân tích và biên dịch. Một script điển hình giảm 40–60% nhờ minify và thêm 60–70% nữa nhờ gzip. Kích thước gzip hiển thị ở đây là ước tính sát với những gì máy chủ của bạn thực sự gửi đi.

Giữ chú thích giấy phép

Nhiều giấy phép mã nguồn mở (MIT, BSD, Apache) yêu cầu thông báo bản quyền phải đi kèm mã. Theo quy ước, chú thích bắt đầu bằng /*! hoặc chứa @license hay @preserve được giữ lại khi bật Giữ chú thích giấy phép.

Khi nào không nên nén thủ công

Nếu dự án của bạn đã dùng bundler, hãy để nó nén bản build production và tạo source map để debug. Công cụ nén online lý tưởng cho script dùng một lần, đoạn mã cho CMS hoặc tag manager, bookmarklet và để xem một đoạn mã có thể nhỏ tới mức nào.

Câu hỏi thường gặp

Mã của tôi có bị tải lên máy chủ không?
Không. Terser chạy trong tab trình duyệt của bạn, nên mã độc quyền không bao giờ rời khỏi máy của bạn.
Nén có thể làm hỏng mã của tôi không?
Terser chỉ áp dụng các biến đổi giữ nguyên hành vi với JavaScript hợp lệ. Mã dựa vào Function.prototype.toString() hoặc dựa vào tên biến cục bộ qua eval có thể bị ảnh hưởng; khi đó hãy tắt Rút gọn tên biến.
Có hỗ trợ cú pháp hiện đại như async/await, class và optional chaining không?
Có. Terser phân tích được cú pháp ES2022+. Thiết lập đích chỉ quy định cú pháp nào được phép dùng trong kết quả; nó không chuyển đổi (transpile) tính năng mới về dạng cũ.
Minify và uglify khác nhau thế nào?
Chúng có cùng ý nghĩa. UglifyJS là công cụ kinh điển; Terser là bản fork được duy trì của nó với hỗ trợ đầy đủ ES2015+.

Công cụ liên quan

Nén CSS (CSS Minifier) Thu nhỏ stylesheet: rút gọn giá trị và gộp quy tắc trùng lặp. Nén HTML (HTML Minifier) Xóa chú thích, khoảng trắng và nén CSS/JS nội tuyến. JSON Formatter Làm đẹp, thu gọn và kiểm tra JSON, báo lỗi theo dòng/cột. SQL Formatter Định dạng hoặc thu gọn SQL cho PostgreSQL, MySQL, T-SQL, BigQuery...