Nén JavaScript thường bị nhầm lẫn với obfuscation (làm rối mã), dù đây là hai công việc khác nhau với mục đích khác nhau: một cái tiết kiệm byte, cái còn lại khiến logic của code khó hiểu hơn.
Công cụ nén làm gì
Công cụ nén loại bỏ khoảng trắng, comment và xuống dòng, đồng thời rút gọn tên biến cục bộ xuống còn một hoặc hai ký tự ở những chỗ an toàn để làm vậy. Logic của chương trình hoàn toàn không đổi — đây thuần túy là nén kỹ thuật của tệp.
Từ JSMin đến Terser: lược sử ngắn gọn
Douglas Crockford phát hành JSMin vào đầu những năm 2000, một trong những công cụ nén JS đầu tiên được dùng rộng rãi — nó chỉ xóa khoảng trắng và comment, không đụng đến tên biến. Các công cụ hiện đại như Terser (một nhánh của UglifyJS) và esbuild đi xa hơn: chúng phân tích code thành cây cú pháp trừu tượng (AST) rồi đổi tên biến cục bộ và tham số hàm thành một ký tự ở bất cứ đâu an toàn để làm vậy — và chính bước này, chứ không phải việc xóa khoảng trắng, mới đóng góp phần lớn vào việc giảm kích thước tệp trên các dự án thực tế.
Source map: gỡ lỗi code đã bị đổi tên biến
Khi tên biến đã rút gọn thành a, b, c và mọi dấu xuống dòng đã biến mất, stack trace lỗi trên production chỉ trỏ đến một vị trí khó đọc nằm trong một dòng dài duy nhất. Source map giải quyết vấn đề này — đó là một tệp riêng ánh xạ mỗi vị trí trong code đã nén trở về dòng, cột và tên biến gốc, giúp DevTools của trình duyệt hiển thị stack trace dễ đọc dù trình duyệt thực chất đang chạy code đã nén.
Vì sao cần dùng công cụ này
- Giảm kích thước bundle JS trước khi deploy lên production.
- Tăng tốc độ tải và phân tích script trong trình duyệt.
- Hiểu vì sao code đã nén vẫn có thể đọc được nếu muốn, trong khi code bị obfuscate thì khó hiểu hơn nhiều.
Tree shaking so với nén
Tree shaking là một kỹ thuật riêng, không nên nhầm với nén: nó phân tích đồ thị phụ thuộc giữa các module và loại bỏ hoàn toàn các hàm, export không được dùng ở bất kỳ đâu ra khỏi bundle cuối cùng, ngay trong lúc build. Ngược lại, nén hoạt động trên code đã hoàn chỉnh và chỉ rút gọn cách biểu diễn văn bản của nó, không xóa bất kỳ logic nào thực sự được dùng. Các công cụ build hiện đại như Vite hay webpack thường áp dụng cả hai kỹ thuật theo trình tự: tree shaking loại bỏ code chết trước, sau đó nén phần còn lại.