Bộ giảm thiểu và làm xáo trộn JS/JSON

Nén (minify) JavaScript là xóa chú thích, thụt lề và xuống dòng mà không đổi hành vi của mã, giúp tệp nhỏ hơn và trang tải nhanh hơn. Làm đẹp (beautify) thì ngược lại: xuống dòng và thụt lề lại đoạn mã bị dồn thành một dòng để bạn đọc script của bên thứ ba hoặc gỡ lỗi. Công cụ gộp cả hai chức năng cùng một bộ làm rối mã đơn giản vào một trang; dán mã vào là thấy ngay kích thước gốc, kích thước đầu ra và tỷ lệ nén.

Nói thẳng, công cụ dùng biểu thức chính quy gọn nhẹ chứ không phân tích mã thành cây cú pháp như Terser hay esbuild. Khi nén, công cụ xóa chú thích /* */ và //, gộp khoảng trắng và bỏ khoảng trắng quanh toán tử. Cách này tiện cho script nhỏ, bookmarklet và đoạn mã nhúng, nhưng có vài trường hợp có thể hỏng: chuỗi chứa “//” như URL "https://..." bị nhầm là chú thích; mã không viết dấu chấm phẩy và dựa vào cơ chế tự chèn có thể lỗi khi các dòng bị gộp; biểu thức chính quy dạng literal và template string cũng có thể bị ảnh hưởng. Hãy giữ tệp gốc và chạy thử kết quả trước khi triển khai.

Chức năng làm rối mã chuyển mã sang Base64 rồi bọc trong eval; nếu dán JSON thì bọc trong JSON.parse. Cách này khiến người khác không đọc được ngay, nhưng chỉ là che đi chứ không bảo vệ: ai cũng giải mã được trong vài giây, tệp lớn hơn khoảng một phần ba, và mã dùng eval có thể bị chính sách bảo mật nội dung (CSP) của website chặn. Đừng bao giờ đặt khóa API hay mật khẩu trong mã front-end rồi trông cậy vào việc làm rối.

Với dự án thực tế, hãy nén tự động trong quá trình build bằng Vite, esbuild hoặc Terser; các công cụ này rút ngắn tên biến an toàn và loại bỏ mã thừa. Công cụ này phù hợp để xử lý nhanh từng đoạn mã, xem mã có thể nhỏ đến đâu, hoặc mở rộng mã đã nén của người khác để đọc. Mọi xử lý diễn ra trong trình duyệt và mã không bao giờ được tải lên.