Công cụ Nén và Định dạng JavaScript
Nén hoặc định dạng mã JavaScript với các tùy chọn tùy chỉnh
Tài liệu Công cụ Nén và Định dạng JavaScript
Công cụ này là gì?
Nén JavaScript loại bỏ khoảng trắng, comments và token không cần thiết trong khi bảo toàn ngữ nghĩa thực thi. Khác với CSS, phải tôn trọng quy tắc Chèn Dấu Chấm Phẩy Tự Động (ASI). Công cụ áp dụng xóa khoảng trắng bảo thủ, bảo toàn các xuống dòng nhạy cảm ASI, và xóa toàn bộ comments (// và /* */).
Tính năng chính
- Xóa khoảng trắng và comments: xóa khoảng trắng giữa câu lệnh, dòng trắng, // và /* */. Bảo toàn chuỗi, template literal và regex literal.
- Xử lý xuống dòng ASI an toàn: giữ xuống dòng trước câu lệnh bắt đầu bằng (, [, /, +, -.
- Không đổi tên biến: không giống Terser/UglifyJS, không đổi tên biến cục bộ.
- Hỗ trợ ES6+: arrow function, destructuring, template literal, optional chaining (?.), nullish coalescing (??).
- Công cụ định dạng có thể cấu hình: 2/4 khoảng trắng hoặc tab; xuống dòng sau {/}/; và trước //; chuẩn hóa kiểu ngoặc kép.
Trường hợp sử dụng phổ biến
- Debug phát triển: định dạng JS nén trong production (bundle React/Vue/Angular) không cần source map.
- Nén nhanh: giảm JS inline trong HTML không cần cấu hình Webpack.
- Phân tích bảo mật: định dạng script bên thứ ba bị làm mờ để đánh giá nội dung.
- Ước tính kích thước: so sánh byte trước/sau.
Cách sử dụng Trình nén JavaScript
Hai chế độ: Minify (xóa comments/khoảng trắng) và Beautify (định dạng lại với thụt lề nhất quán).
Để nén JavaScript:
- Dán mã JavaScript vào bảng đầu vào hoặc tải lên file .js.
- Nhấn “Minify”. Khoảng trắng và comments bị xóa trong khi bảo toàn nội dung chuỗi và xuống dòng ASI an toàn.
- Sao chép đầu ra hoặc tải xuống .js. Tỷ lệ giảm kích thước được hiển thị.
Để định dạng/làm đẹp JavaScript:
- Dán JavaScript nén hoặc khó đọc vào bảng đầu vào.
- Chọn kiểu thụt lề rồi nhấn “Beautify”.
- Đầu ra được định dạng xuất hiện trong bảng kết quả.
Tại sao nên nén JavaScript?
Nén JS giảm kích thước script, cải thiện TTFB và TTI. Chỉ khoảng trắng: 20-40%; với đổi tên Terser: 40-65%. Gzip: thêm 60-75%.
JS nén cũng giảm thời gian parse V8/SpiderMonkey. Trên thiết bị di động, mỗi KB tiết kiệm cải thiện FID và INP (Core Web Vitals).
Các điều chỉnh khi làm đẹp
Tái tạo thụt lề có thể đọc từ JS nén. Xử lý hàm lồng nhau, class và cấu trúc điều khiển.
- Thụt lề có thể cấu hình: 2/4 khoảng trắng hoặc tab
- Xuống dòng sau {/}/; và trước // comments
- Chuẩn hóa kiểu ngoặc kép: đơn/kép/backtick
- Hàm và class lồng nhau với mức thụt lề tăng dần
Các điều chỉnh khi nén
Các lượt biến đổi cấp văn bản giảm byte không thay đổi hành vi.
- Tất cả // comments một dòng bị xóa
- Tất cả /* */ comments đa dòng bị xóa (bao gồm JSDoc)
- Khoảng trắng giữa câu lệnh và dòng trắng bị xóa
- Xuống dòng ASI-nhạy trước (, [, /, +, - được giữ
- Chuỗi, template literal và regex literal không thay đổi
Ảnh hưởng ước tính đến kích thước tệp
Cấp văn bản: 20-40% giảm. Terser: 40-65%. Gzip: thêm 60-75%; tổng cộng 85-90%.
Công Cụ Liên Quan
Nén & Làm Đẹp CSS
Nén hoặc làm đẹp mã CSS, loại bỏ khoảng trắng và chú thích để tối ưu kích thước tệp, hoặc định dạng mã để dễ đọc
Nén & Làm Đẹp HTML
Nén hoặc làm đẹp mã HTML, loại bỏ khoảng trắng và chú thích để tối ưu kích thước tệp, hoặc định dạng mã để dễ đọc
Trình Định Dạng JSON
Định dạng và xác thực dữ liệu JSON để cải thiện khả năng đọc và gỡ lỗi
Trình Định Dạng XML
Định dạng và xác thực dữ liệu XML với làm nổi bật cú pháp
Trình Kiểm Tra Regex
Kiểm tra và gỡ lỗi biểu thức chính quy với kết quả khớp tức thì
Kiểm Tra Văn Bản Khác Biệt
So sánh sự khác biệt giữa hai văn bản hoặc tệp với chế độ xem nổi bật song song