Minify Code Online - Nén Code JS, CSS Và HTML

Minify Code là gì?

Minify Code nén JavaScript, CSS và HTML để giảm dung lượng file bằng cách loại bỏ comment, khoảng trắng và những ký tự khác mà trình duyệt không cần. Code vẫn chạy y hệt như cũ, chỉ là nhỏ gọn hơn — nên trang tải nhanh hơn và dùng ít băng thông hơn.

Công cụ được xây cho lập trình viên front-end và web muốn có kết quả sẵn sàng cho production mà không phải cài build tool. Chọn tab ngôn ngữ, dán code vào, và kết quả đã minify hiện ra tự động kèm thống kê nén trực tiếp. JavaScript do Terser xử lý, còn CSS và HTML dùng những quy tắc chuyên biệt giữ nguyên các phần buộc phải giữ.

Riêng tư theo thiết kế: mọi thao tác minify đều chạy trên trình duyệt của bạn. Code không bao giờ được tải lên, ghi log hay lưu trên bất kỳ máy chủ nào.

Cách Minify Code

Chọn Ngôn Ngữ

Chọn tab JavaScript, CSS hoặc HTML ở trên cùng. Mỗi tab nạp đúng engine và bộ tùy chọn riêng của nó.

Dán Hoặc Tải Code Lên

Gõ hoặc dán vào ô đầu vào bên trái, hoặc dùng Tải lên để nạp một file từ thiết bị. Bấm Mẫu để chèn code ví dụ cho ngôn ngữ đang chọn.

Chỉnh Tùy Chọn

Tinh chỉnh các tùy chọn riêng theo ngôn ngữ trên thanh công cụ — chẳng hạn Mangle và Compress cho JavaScript, hay Gộp khoảng trắng cho HTML. Kết quả được minify lại ngay khi bạn đổi một thiết lập.

Xem & Xuất Kết Quả

Kết quả hiện ra bên phải kèm tô màu cú pháp, và thanh thống kê cho thấy dung lượng gốc, dung lượng sau minify và mức tiết kiệm. Sau đó Sao chép kết quả hoặc Tải xuống dưới dạng file.

Phím tắt: kết quả tự động minify khi bạn gõ sau một khoảng dừng ngắn. Nhấn Ctrl + Enter để minify ngay, hoặc Tab trong trình soạn thảo để chèn bốn dấu cách.

Tính Năng

JavaScript bằng Terser

Minify code ES6+ hiện đại bằng Terser, bật/tắt Mangle, Compress, Bỏ console và Bỏ debugger.

Minify CSS

Xóa comment, gộp khoảng trắng, rút gọn mã màu hex và tối ưu giá trị 0 trong khi giữ nguyên calc().

Minify HTML

Loại bỏ comment, gộp khoảng trắng và tùy chọn xóa thẻ đóng không bắt buộc cùng dấu nháy thuộc tính thừa.

Tự Động Minify

Kết quả cập nhật tự động khi bạn gõ, với xử lý chống dội nên không bao giờ chạy chậm theo sau thao tác nhập.

Thống Kê Nén

Xem dung lượng gốc, dung lượng sau minify và phần trăm tiết kiệm chính xác sau mỗi lần chạy.

Kết Quả Tô Màu Cú Pháp

Kết quả đã minify được tô màu bằng Prism.js để vẫn dễ đọc thay vì là một dòng dày đặc.

Tải Lên & Tải Xuống

Nạp một file thẳng từ thiết bị và tải kết quả đã minify xuống với đúng phần mở rộng.

Sao Chép Một Chạm & Code Mẫu

Sao chép kết quả vào clipboard ngay tức thì, hoặc nạp code mẫu có sẵn để thử từng ngôn ngữ.

100% Chạy Trên Máy Bạn

Mọi xử lý đều diễn ra trên trình duyệt của bạn, nên code không bao giờ rời khỏi thiết bị.

Tùy Chọn Theo Ngôn Ngữ

JavaScript

Mangle rút ngắn tên cục bộ, Compress áp dụng loại bỏ code chết, còn Bỏ console / Bỏ debugger gỡ các lệnh debug.

CSS

Bật/tắt Xóa comment; việc gộp khoảng trắng, rút gọn hex và tối ưu giá trị 0 chạy tự động.

HTML

Bật/tắt Xóa comment, Gộp khoảng trắng và Xóa thẻ tùy chọn để kiểm soát mức độ cắt gọn markup.

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

Minify code là gì?

Minify loại bỏ mọi thứ mà trình duyệt không cần để chạy code — comment, khoảng trắng thừa và cú pháp không bắt buộc — mà không thay đổi chức năng của code. Kết quả là một file nhỏ hơn, tải và phân tích nhanh hơn.

Minify code có làm web nhanh hơn không?

Có. File JavaScript, CSS và HTML nhỏ hơn sẽ tải nhanh hơn và buộc trình duyệt đọc ít ký tự hơn, nhờ đó giảm dùng băng thông và giúp trang sớm tương tác được hơn.

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

Không. Mọi thao tác minify đều diễn ra cục bộ trên trình duyệt của bạn. Code không bao giờ được tải lên hay lưu ở bất cứ đâu — kể cả mã nguồn độc quyền cũng nằm yên trên thiết bị của bạn.

Minify có làm hỏng code không?

Công cụ được thiết kế để giữ nguyên chức năng. Terser đổi tên các định danh JavaScript một cách an toàn, HTML giữ nguyên nội dung của pre, script, style và textarea, còn CSS giữ nguyên các biểu thức calc(). Như mọi bước build, hãy kiểm thử kết quả và lưu lại mã nguồn gốc.

"Mangle" nghĩa là gì?

Mangle rút ngắn tên biến và tên hàm cục bộ — ví dụ myVariable thành a — để giảm dung lượng file mà không ảnh hưởng tới cách code chạy. Nó chỉ đổi tên những định danh không lộ ra bên ngoài.

Tôi có giải nén (unminify) code ở đây được không?

Không — công cụ này chỉ minify. Để định dạng đẹp hoặc format lại code đã minify, hãy dùng một công cụ format hay beautifier. Lưu ý rằng tên JavaScript đã bị mangle không thể khôi phục về tên gốc, vì thông tin đó đã bị xóa trong quá trình minify.

Tôi tiết kiệm được bao nhiêu dung lượng?

Tùy vào ngôn ngữ và phong cách code. JavaScript bật Mangle và Compress thường giảm 40–70%, CSS thường 20–40%, còn HTML 10–30% tùy lượng khoảng trắng và số comment có sẵn. Thanh thống kê hiển thị mức tiết kiệm chính xác cho code của bạn.

Minify khác gì với gzip?

Minify viết lại chính mã nguồn để loại bỏ những ký tự thừa, nên file nhỏ hơn ở mọi nơi nó được đọc. Gzip là phương pháp nén phía máy chủ áp dụng trong lúc truyền và được trình duyệt tự động giải nén. Hai cách bổ trợ nhau: minify trước, rồi để máy chủ gzip kết quả để có file tải về nhỏ nhất.

Tôi có minify nhiều file cùng lúc được không?

Công cụ xử lý từng file một. Sau khi minify xong, hãy tải file mới lên hoặc dán code mới vào để xử lý file tiếp theo.