Thu gọn JavaScript
Giảm dung lượng file JavaScript và xem chính xác bạn tiết kiệm được bao nhiêu.
Chạy ngay trên trình duyệt. Không có gì bạn nhập vào bị gửi đi đâu cả.
- Rút ngắn tên biến
- Hiện số byte tiết kiệm
- Không tải gì lên
Cách thu gọn JavaScript
- Dán JavaScript của bạn.
- Tắt Nén hoặc Rút ngắn tên biến nếu bạn cần giữ chúng dễ đọc.
- Sao chép hoặc tải file đã thu gọn.
Nén và Rút ngắn tên biến mỗi cái làm gì
| Tùy chọn | Tác dụng |
|---|---|
| Nén | Xóa code chết và đơn giản hóa biểu thức |
| Rút ngắn tên biến | Đổi tên biến cục bộ thành tên ngắn như a, b và c |
Những gì vẫn giữ nguyên dù thế nào
- Hành vi công khai: cùng đầu vào vẫn cho ra cùng đầu ra.
- Mọi chuỗi ký tự trong code, kể cả văn bản hiển thị cho người dùng.
- Thứ tự các phép toán chạy.
- Một chú thích /*! ... */, vì Terser mặc định giữ kiểu này, quy ước mà nhiều thư viện dùng cho banner giấy phép.
Mẹo khi thu gọn JavaScript
- Giữ một bản chưa thu gọn, hoặc tạo source map trong công cụ build của bạn, để lỗi ở production vẫn đọc được.
- Tắt Rút ngắn tên biến cho một thư viện mà lập trình viên khác sẽ đọc, để thông báo lỗi giữ được tên có ý nghĩa.
- Chạy test trên bản đã thu gọn trước khi phát hành, vì một trường hợp hiếm gặp trong bộ thu gọn vẫn có thể xảy ra dù công cụ này được dùng rộng rãi.
Câu hỏi thường gặp về Thu gọn JavaScript
JavaScript đã thu gọn có còn là code hợp lệ không?
Có. Nó chạy giống hệt bản gốc, chỉ khác là tên ngắn hơn và không có khoảng trắng thừa.
JavaScript thường nhỏ lại bao nhiêu?
Thường 30 đến 60%, tùy vào bản gốc có bao nhiêu chú thích và tên biến dài.
Nếu code của tôi có lỗi cú pháp thì sao?
Lỗi sẽ hiện kèm dòng và cột nơi nó xảy ra, để bạn sửa rồi thử lại.
Khác biệt giữa Nén và Rút ngắn tên biến là gì?
Nén viết lại code để xóa nhánh chết và đơn giản hóa biểu thức. Rút ngắn tên biến đổi tên biến cục bộ thành một chữ cái. Bạn có thể tắt riêng từng cái.
Công cụ có thu gọn được cú pháp hiện đại như async và arrow function không?
Có, kể cả cú pháp từ ES2020 trở lên như optional chaining và async hoặc await.
Công cụ này dùng bộ thu gọn nào?
Terser, phiên bản kế thừa chuẩn của UglifyJS và là bộ thu gọn mà hầu hết bundler, gồm webpack, Rollup và esbuild, dùng mặc định.
Thu gọn có bao giờ làm hỏng code của tôi không?
Nó không nên làm thay đổi hành vi với code thông thường. Code đọc tên gốc của một hàm hay biến lúc chạy, ví dụ qua các thủ thuật introspection không chuẩn, có thể hỏng khi tên bị rút ngắn. Hãy tắt Rút ngắn tên biến nếu điều đó áp dụng cho bạn.
Công cụ có hỗ trợ cú pháp TypeScript không?
Không, công cụ này chỉ nhận JavaScript thuần. Chú thích kiểu của TypeScript không phải JavaScript hợp lệ và sẽ gây lỗi cú pháp ở đây, nên hãy biên dịch TypeScript sang JavaScript trước.