Phát triển Web

JS Minify / Beautify

Nén JavaScript cho production hoặc định dạng code đã nén thành dạng dễ đọc.


                        
                    

Minifying JavaScript strips whitespace, comments, and line breaks, and often shortens local variable names — none of that changes how the code runs, but it noticeably shrinks the file for a faster load.

How to use it

Common uses

Things to keep in mind

Minification isn't obfuscation — variables get renamed to shrink size, not to hide logic; serious obfuscation needs dedicated specialized tools.

Minified code in production without a source map is hard to debug — the line numbers in error messages won't match the original file.

Bài viết về công cụ này: Rút gọn JavaScript: sự khác biệt giữa rút gọn và làm rối mã

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

Công cụ thu nhỏ sử dụng công cụ gì bên trong?

Nó sử dụng terser, một công cụ thu nhỏ và nén JavaScript được sử dụng rộng rãi, cũng hiểu cú pháp hiện đại.

Vì sao JavaScript đã thu nhỏ khó gỡ lỗi hơn?

Terser rút ngắn tên biến và hàm, loại bỏ khoảng trắng và chú thích, và vì công cụ này không tạo source map, công cụ phát triển của trình duyệt không thể ánh xạ mã đã thu nhỏ về các dòng gốc dễ đọc.

Thu nhỏ có làm hỏng mã của tôi không?

Với JavaScript hợp lệ về cú pháp, thu nhỏ giữ nguyên hành vi; nếu có lỗi cú pháp, công cụ báo dòng và cột để bạn có thể sửa trước khi thu nhỏ — mọi thứ chạy cục bộ mà không tải mã của bạn lên.

Tree shaking khác rút gọn như thế nào?

Tree shaking loại bỏ khỏi bundle những đoạn mã không được dùng ở bất kỳ đâu, bằng cách phân tích đồ thị phụ thuộc giữa các module trong quá trình build, còn rút gọn chỉ rút ngắn cách biểu diễn văn bản của mã đã có sẵn — nó không loại bỏ bất kỳ hàm nào thực sự được thực thi.

Dùng JavaScript đã rút gọn trong production mà không kiểm thử thêm có an toàn không?

Có, rút gọn là một phép biến đổi thuần cú pháp giữ hành vi của chương trình hoàn toàn giống nhau; bất kỳ sự khác biệt nào về hành vi sau khi rút gọn đều cho thấy một lỗi trong chính công cụ rút gọn, chứ không phải một thay đổi logic có chủ đích.

Bài viết: Phát triển Web

HEX, RGB, HSL: vì sao có nhiều cách viết một màu đến vậy

Vì sao các nhà thiết kế thường chọn HSL thay vì HEX khi chọn sắc độ màu bằng tay.

Rút gọn CSS: điều gì thực sự bị loại bỏ khỏi tệp và vì sao

Vì sao CSS đã rút gọn hoạt động chính xác như cũ trong trình duyệt, dù trở nên khó đọc với con người.

Rút gọn HTML: vì sao khoảng trắng trong markup lại có ý nghĩa

Vì sao loại bỏ khoảng trắng bên trong <pre> hoặc một textarea có thể phá vỡ giao diện trang, khác với hầu hết mọi nơi khác.

Gradient CSS: linear khác gì với radial và conic

Vì sao conic-gradient phù hợp với biểu đồ tròn, còn radial-gradient tạo hiệu ứng vệt sáng.

Thuật toán Luhn: cách kiểm tra tính đúng đắn của số thẻ

Vì sao một số thẻ vượt qua kiểm tra Luhn không có nghĩa là thẻ đó thực sự tồn tại.

IBAN: cấu trúc của một số tài khoản ngân hàng quốc tế

Vì sao hai chữ cái đầu tiên của IBAN là mã quốc gia, không phải một phần của số tài khoản.

Mã QR: một liên kết vừa vặn trong ô vuông điểm ảnh như thế nào

Vì sao một mã QR có logo ở giữa vẫn quét được dù một phần hoa văn bị che.

Mã vạch: Code 128 khác gì với EAN-13

Vì sao sản phẩm trên kệ hàng gần như luôn dùng EAN-13 thay vì Code 128.

Ảnh placeholder: vì sao ảnh giả lại quan trọng trong quá trình phát triển

Vì sao các nhà phát triển cố tình chèn hình chữ nhật xám thay vì ảnh thật khi một bố cục vẫn đang được xây dựng.