Cách dùng Nén JavaScript (Minify JS)
- Dán JavaScript của bạn vào hoặc mở tệp
.js. - Giữ Compress và Mangle names bật để có kết quả nhỏ nhất; chọn ES module nếu code có
import/export. - Tùy chọn: xóa các lệnh
consolevà chọn chú thích muốn giữ lại. - Sao chép kết quả hoặc tải về dưới dạng
.min.js.
Công cụ minify JavaScript làm gì?
Minify (nén) giúp JavaScript nhỏ hơn mà không làm thay đổi cách nó hoạt động. Công cụ loại bỏ khoảng trắng và comment, rút ngắn tên biến và hàm cục bộ, đồng thời viết lại code thành dạng tương đương nhưng ngắn hơn. File nhỏ hơn sẽ tải và phân tích nhanh hơn, giúp cải thiện tốc độ trang và Core Web Vitals — đặc biệt trên di động.
Công cụ này chạy Terser, bộ minify đứng sau Vite, webpack và Rollup, ngay trên trình duyệt của bạn.
Các tùy chọn chính
| Tùy chọn | Chức năng | Rủi ro |
|---|---|---|
| Compress | Xóa code không bao giờ được chạy, gộp hằng số (60 * 60 → 3600), đơn giản hóa điều kiện và nối các câu lệnh | Rất thấp |
| Mangle names | Đổi tên biến và tham số cục bộ thành một hoặc hai chữ cái | Thấp — code dùng eval hoặc Function.name có thể bị lỗi |
| Mangle top-level | Cũng đổi tên các hàm và biến toàn cục | Gây lỗi với code mà các script khác gọi theo tên |
| ES module | Phân tích import/export và bật strict mode cùng việc rút gọn cấp cao nhất | Không có với module thật |
| Remove console.* | Xóa console.log và các lệnh tương tự | Xóa các log bạn có thể muốn giữ khi chạy production |
Minify và nén khác nhau thế nào?
Minify và nén gzip/Brotli hoạt động cùng nhau. Minify thường giảm 30–60 % dung lượng file; sau đó gzip hoặc Brotli trên máy chủ nén tiếp phần còn lại thêm 60–70 %. Các số liệu phía trên hiển thị cả hai: dung lượng sau khi minify và dung lượng sau gzip — con số thực sự được truyền qua mạng.
Giữ lại comment license
Các giấy phép mã nguồn mở như MIT yêu cầu thông báo bản quyền phải đi kèm với code. Theo quy ước, các comment này bắt đầu bằng /*! hoặc chứa @license, và cài đặt mặc định sẽ giữ chúng lại.
Xử lý sự cố
- Lỗi cú pháp: dòng và cột lỗi sẽ được hiển thị. TypeScript và JSX cần được biên dịch sang JavaScript trước.
- Code ngừng hoạt động sau khi rút gọn tên: tắt Mangle top-level names; nếu vẫn lỗi, hãy kiểm tra
evalhoặc code đọc tên hàm. - Cần lại phiên bản dễ đọc? Dùng công cụ định dạng JavaScript để làm đẹp code đã nén.
Cũng được tìm dưới tên: nén javascript, minify js, javascript minifier, nén js online, rút gọn code javascript, terser online, nén file js, minify es6.
Các công cụ dùng kèm tốt với Nén JavaScript (Minify JS)
- Nén HTML — Giảm dung lượng trang HTML và template bằng cách xóa comment và khoảng trắng dư thừa, minify <style> và <script> inline, đồng thời dọn dẹp thuộc tính — mà bố cục trang vẫn giữ nguyên.
- Nén CSS — Dán stylesheet vào để thu nhỏ ngay lập tức.
- Nén JSON — Xóa mọi khoảng trắng không cần thiết trong JSON, kiểm tra cú pháp cùng lúc và xem chính xác bạn tiết kiệm được bao nhiêu byte — trước và sau khi nén gzip.
- Kiểm tra nén website — Nhập một URL để xem máy chủ gửi kiểu nén nào cho từng Accept-Encoding, tiết kiệm được bao nhiêu byte, CSS và JavaScript có được nén không, và Brotli có thể giảm thêm bao nhiêu.
Câu hỏi thường gặp
Terser có tốt hơn UglifyJS không?
Code sau khi nén có chạy giống hệt không?
eval, with hoặc tên hàm khi chạy; hãy tắt tính năng này với những code như vậy.