Giảm dung lượng JavaScript
JavaScript thường là phần nặng nhất của một trang web. Mỗi kilobyte đều phải được tải về, phân tích cú pháp và thực thi trước khi trang có thể tương tác. Việc nén mã (minify) có thể giảm một nửa dung lượng hoặc hơn. Công cụ này sử dụng Terser, trình nén cốt lõi của hầu hết các công cụ build hiện đại, để xóa khoảng trắng và chú thích, rút gọn tên biến và nén mã an toàn — ngay trên trình duyệt của bạn.
Tính năng
- Engine Terser hỗ trợ chuẩn ES2015+ hiện đại.
- Nén mã: loại bỏ mã không dùng (dead-code), gộp hằng số và rút gọn cú pháp.
- Rút gọn tên biến (mangling) cục bộ (tùy chọn).
- Giữ lại chú thích bản quyền theo yêu cầu.
- So sánh dung lượng theo byte và phần trăm.
- Riêng tư: mã được xử lý trực tiếp trên máy của bạn.
Mức giảm dung lượng thông thường
| Mã nguồn | Mức giảm thông thường |
|---|---|
| Mã ứng dụng có nhiều chú thích | 50–70% |
| Mã nguồn thư viện | 40–60% |
| Mã đã được viết gọn | 15–30% |
| Mã đã được nén (minify) từ trước | 0–5% |
Việc phân phối các file đã nén (minify) kết hợp với chuẩn nén gzip hoặc Brotli thường giúp giảm thêm 60–75% dung lượng truyền tải.
Mẹo nhỏ
- Giữ lại mã nguồn gốc — mã đã nén rất khó đọc và gỡ lỗi (debug). Hãy sử dụng source map trong quá trình build để gỡ lỗi trên môi trường production.
- Nén mã ở bước build cho môi trường production; công cụ này lý tưởng cho các script dùng một lần, đoạn mã ngắn (snippet), bookmarklet và các dự án không dùng công cụ đóng gói (bundler).
- Kiểm tra lại sau khi nén, đặc biệt là với các đoạn mã phụ thuộc vào tên hàm hoặc
eval.
Các công cụ liên quan
Nén stylesheet với Công cụ nén CSS, làm đẹp dữ liệu với Công cụ định dạng JSON, hoặc mã hóa script để nhúng với Base64.