Minify JavaScript - Nén Mã JS Trực Tuyến Bằng Terser

Minify JavaScript Để Thu Nhỏ Dung Lượng Tệp

Công cụ minify JavaScript này nén mã JS ngay trong trình duyệt để giảm dung lượng tệp và tăng tốc tải trang. Được vận hành bởi Terser, trình minify ES6+ tiêu chuẩn ngành, nó xóa khoảng trắng và chú thích, rút gọn tên biến cục bộ, loại bỏ mã chết và bỏ các câu lệnh debug để tạo ra kết quả gọn nhẹ, sẵn sàng cho production.

Chạy hoàn toàn trong trình duyệt. Terser thực thi cục bộ, nên JavaScript của bạn không bao giờ được tải lên hay lưu — kể cả mã nguồn độc quyền cũng nằm yên trên máy bạn.

Vì Sao Nên Minify JavaScript

Tải & Phân Tích Nhanh Hơn

Script nhỏ hơn tải nhanh hơn và engine phân tích ít ký tự hơn, giảm thời gian đến khi tương tác.

Tải Trọng Nhỏ Hơn

Mangle và nén thường cắt được phần lớn dung lượng mã nguồn trước cả khi gzip áp dụng.

Mã Production Sạch Hơn

Bỏ log console và câu lệnh debugger để thông tin debug không bao giờ lọt đến người dùng cuối.

Cách Minify Mã JS

Dán Hoặc Tải Lên JS Của Bạn

Nhập hoặc dán script vào khung Đầu vào, hoặc dùng Tải lên để nạp tệp .js. Bấm Mẫu để chèn mã ví dụ.

Cấu Hình Tùy Chọn Terser

Bật tắt Mangle, Compress, Bỏ console và Bỏ debugger để điều chỉnh mức độ tối ưu mã.

Minify

Kết quả tự động cập nhật khi bạn gõ (có debounce). Để chạy ngay, nhấn Ctrl + Enter và kết quả xuất hiện tức thì trong khung Kết quả.

Xem Lại & Xuất

Kiểm tra thanh thống kê để xem dung lượng gốc, dung lượng sau khi minify và phần trăm tiết kiệm. Sau đó Sao chép kết quả hoặc Tải xuống dưới dạng minified.js.

Phím tắt: nhấn Ctrl + Enter trong trình soạn thảo để minify tại chỗ; Tab chèn 4 khoảng trắng.

Tối Ưu & Tính Năng Của Terser

Giải Thích Các Tùy Chọn Minify

Mỗi công tắc tương ứng với một phép biến đổi của Terser. Chú thích luôn bị xóa khỏi kết quả bất kể các công tắc bên dưới.

Tùy chọn	Chức năng	Mặc định
Mangle	Rút gọn tên biến và hàm cục bộ (ví dụ `userName` → `a`)	Bật
Compress	Áp dụng loại bỏ mã chết và nhiều tối ưu dung lượng	Bật
Bỏ console	Xóa mọi lệnh `console.*`	Tắt
Bỏ debugger	Xóa các câu lệnh `debugger`	Bật

Engine Cấp Production

Hỗ Trợ Đầy Đủ ES6+

Terser hiểu arrow function, class, template literal, async/await và các cú pháp hiện đại khác.

Dọn Dẹp Debug

Xóa output console và breakpoint debugger để chúng không bao giờ lên production.

Thống Kê Nén Trực Tiếp

Xem dung lượng gốc, dung lượng sau khi minify và phần trăm tiết kiệm sau mỗi lần chạy, cùng kết quả tô sáng cú pháp.

Tải Lên, Sao Chép & Tải Xuống

Nạp tệp .js hoặc dán mã, rồi sao chép kết quả hoặc tải xuống dưới dạng minified.js.

Lưu ý về Mangle: Terser chỉ đổi tên các định danh cục bộ, không bao giờ đụng đến biến toàn cục hay thuộc tính đối tượng được truy cập bằng chuỗi. Tránh phụ thuộc vào tên hàm hoặc biến lúc chạy (ví dụ reflection của framework) khi bật mangle.

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

Code của tôi có được gửi lên máy chủ không?

Không. Terser chạy cục bộ trong trình duyệt. JavaScript của bạn không bao giờ được tải lên, ghi log, hay lưu ở bất kỳ đâu.

Minify JavaScript có cải thiện tốc độ trang không?

Có. Loại bỏ khoảng trắng, chú thích và các tên định danh dài giúp tệp nhỏ hơn nên tải và phân tích nhanh hơn. Thanh thống kê hiển thị chính xác số byte bạn tiết kiệm mỗi lần chạy. Minify kết hợp tốt với nén gzip/Brotli ở máy chủ.

"Mangle" làm gì?

Mangle rút gọn tên biến và hàm cục bộ — ví dụ myVariable thành a — để giảm dung lượng tệp mà không thay đổi cách mã hoạt động. Nó chỉ đổi tên các định danh không lộ ra bên ngoài.

Tôi có nên bật "Bỏ console" cho production không?

Thường là có. Xóa các lệnh console.* giúp giảm dung lượng tệp và ngăn thông tin debug lọt đến người dùng. Hãy tắt nó nếu ứng dụng của bạn cố ý ghi log ra console trong production.

Tôi có thể unminify hoặc đảo ngược kết quả không?

Minify là một chiều. Bạn có thể thụt lề lại mã đã nén bằng trình định dạng để dễ đọc, nhưng tên biến đã mangle và chú thích đã xóa thì không thể khôi phục — luôn giữ mã nguồn gốc.

Dùng engine minify nào?

Công cụ này dùng Terser (phiên bản 5.46.0), trình minify JavaScript được sử dụng rộng rãi nhất và là engine đứng sau nhiều bundler hiện đại. Nó hỗ trợ đầy đủ cú pháp ES6+.

Minify có làm hỏng mã của tôi không?

Terser rất đáng tin cậy, nhưng mangle mạnh tay có thể ảnh hưởng đến mã phụ thuộc vào tên định danh lúc chạy (như một số mẹo reflection hoặc serialization). Luôn kiểm tra kết quả đã minify trước khi triển khai, và giữ mã nguồn gốc.