Rút gọn JavaScript

Giới thiệu công cụ Rút gọn JavaScript

Đây là công cụ rút gọn JavaScript trực tuyến miễn phí của chúng tôi nén mã JS bằng cách loại bỏ khoảng trắng, chú thích và các ký tự không cần thiết để cho ra kết quả nhỏ nhất có thể. Nhờ Terser, bộ máy nén JavaScript chuẩn của ngành, công cụ này xử lý cú pháp ES6+ hiện đại, gồm hàm mũi tên, template literal, class, destructuring và nhiều hơn nữa.

Chọn một trong ba mức rút gọn phù hợp với nhu cầu của bạn. Cấu hình Safe giữ nguyên toàn bộ chú thích và tên biến. Cấu hình Recommended loại bỏ chú thích và lệnh debugger nhưng vẫn giữ console log. Cấu hình Aggressive bật đổi tên đầy đủ, loại bỏ mã chết và xóa console log để giảm dung lượng tệp tối đa.

Mọi xử lý đều chạy trực tiếp trong trình duyệt bằng thư viện Terser: mã JavaScript của bạn không bao giờ được tải lên máy chủ nào. Công cụ cung cấp thống kê nén chi tiết gồm dung lượng gốc, dung lượng sau khi rút gọn, số byte tiết kiệm, tỷ lệ nén và số dòng giảm đi. Chỉ cần dán mã, chọn một cấu hình và nhận ngay JavaScript đã tối ưu.

Tính năng chính

• Rút gọn bằng Terser, hỗ trợ đầy đủ cú pháp JavaScript ES6+
• Ba mức rút gọn có sẵn: nén An toàn, Khuyên dùng và Tối đa
• Loại bỏ mã chết để xóa các nhánh mã không thể chạy tới
• Tùy chọn xóa console.log và lệnh debugger
• Đổi tên biến (rút ngắn) ở chế độ Aggressive để nén tối đa
• Tự động rút gọn theo thời gian thực với xử lý trì hoãn khi bạn gõ
• Thống kê nén chi tiết: dung lượng gốc, dung lượng sau rút gọn, số byte tiết kiệm, tỷ lệ và số dòng
• Kiểm tra cú pháp tích hợp, có đối chiếu dấu ngoặc
• Hỗ trợ tải lên tệp JavaScript (.js) để xử lý các tập lệnh có sẵn
• Sao chép vào bộ nhớ tạm chỉ với một lần nhấp và tải xuống dưới dạng tệp .js

Cách dùng công cụ Rút gọn JavaScript

1. Chọn mức rút gọn: Chọn Safe để nén cơ bản, Recommended để tối ưu cân bằng, hoặc Aggressive để giảm dung lượng tối đa kèm đổi tên biến.
2. Nhập JavaScript của bạn: Dán mã JS vào vùng văn bản, tải lên tệp .js hoặc nhấp Load Sample để thử bản minh họa.
3. Chờ xử lý: Công cụ tự động rút gọn mã sau một khoảng trễ ngắn và hiển thị chỉ báo đang xử lý trong lúc biên dịch.
4. Xem kết quả nén: Kiểm tra bảng thống kê để biết dung lượng giảm bao nhiêu, gồm dung lượng gốc và sau rút gọn, số byte tiết kiệm và số dòng.
5. Sao chép hoặc tải xuống: Nhấp Copy để chép JavaScript đã rút gọn vào bộ nhớ tạm, hoặc dùng Download để lưu thành tệp .js.

Trường hợp sử dụng

• Triển khai lên môi trường chính thức: Rút gọn JavaScript trước khi triển khai để giảm dung lượng tệp và tăng tốc độ tải trang.
• Tối ưu hiệu năng: Nén tập lệnh để cải thiện các chỉ số Core Web Vitals, Time to Interactive và First Contentful Paint.
• Giảm băng thông: Tệp JS nhỏ hơn giúp giảm chi phí lưu trữ và truyền dữ liệu, nhất là với các trang web có lưu lượng truy cập lớn.
• Tối ưu cho thiết bị di động: JavaScript đã nén tải nhanh hơn trên mạng di động, cải thiện trải nghiệm cho người dùng di động.
• Rút gọn nhanh một lần: Rút gọn từng tập lệnh riêng lẻ khi bạn cần tối ưu nhanh ngoài quy trình build của mình.
• Đánh giá và phân tích mã: Dùng thống kê nén để đánh giá mã nguồn của bạn còn bao nhiêu tiềm năng tối ưu.
• Học tập và thử nghiệm: Hiểu cách rút gọn hoạt động bằng cách so sánh kết quả trước và sau ở các mức cấu hình khác nhau.

Câu hỏi thường gặp

Mẹo và thực hành tốt nhất

• Luôn giữ tệp nguồn: Lưu JavaScript gốc chưa rút gọn trong hệ thống quản lý phiên bản và chỉ rút gọn cho các bản build chính thức.
• Tạo source map: Dùng source map trong quy trình build để gỡ lỗi mã đã rút gọn bằng công cụ dành cho nhà phát triển của trình duyệt.
• Kiểm thử sau khi rút gọn: Luôn chạy bộ kiểm thử trên mã đã rút gọn, nhất là khi dùng chế độ Aggressive kèm đổi tên biến.
• Kết hợp nén ở máy chủ: Kết hợp rút gọn JavaScript với nén gzip hoặc Brotli trên máy chủ web để giảm dung lượng tệp tốt nhất.
• Bắt đầu với Khuyến nghị: Mức Khuyến nghị cho sự cân bằng tốt nhất giữa an toàn và mức nén với hầu hết dự án.
• Xóa console log ở môi trường chính thức: Dùng chế độ Aggressive để tự động loại bỏ các lệnh console.log không nên xuất hiện trong mã production.