Softonic

Bộ thu nhỏ mã JavaScript

Bước 1 / 3
Tiếp theo

Dán mã JavaScript để nhận phiên bản được rút gọn, nhỏ hơn từ 40 đến 70%: các khoảng trắng bị loại bỏ, biến được rút gọn thành một chữ cái duy nhất, các nhánh không cần thiết bị loại bỏ, hằng số được nén lại, và (nếu bật chức năng này) các chú thích cũng được xóa bỏ. Phương pháp này rất hữu ích cho việc kiểm tra kích thước nhanh chóng, các trường hợp chèn mã một lần hoặc trang đích khi bạn chưa sử dụng toàn bộ chuỗi công cụ xây dựng.

Cách tối ưu hóa JavaScript

  1. 1

    Dán nguồn

    Bất kỳ mã JavaScript hợp lệ nào trong phiên bản ES5 trở lên đều được chấp nhận. Đối với ES6 và các phiên bản mới hơn (như từ ngữ mẫu, lớp và mô-đun), hãy đảm bảo mã mục tiêu phù hợp.

  2. 2

    Chọn mức độ nén

    An toàn (khoảng trắng + chú thích); mặc định (+ rút gọn tên biến); mạnh (+ rút gọn tên thuộc tính, có thể gây lỗi khi truy cập DOM).

  3. 3

    Giảm thiểu tối đa

    Công cụ thực hiện phép biến đổi tương thích với Terser và xuất kết quả kèm theo số lượng byte trước và sau.

  4. 4

    Sao chép hoặc tải xuống

    Dán kết quả vào thẻ `<script>` hoặc lưu dưới tên `.min.js` để phục vụ từ CDN của bạn.

Các byte đi đâu

Một tệp đã nén thông thường nhỏ hơn từ 40 đến 70% so với tệp gốc. Khi nén bằng gzip (hoặc Brotli – công cụ mà Cloudflare và hầu hết các CDN đều dùng), kích thước giảm thêm 60–75%. Cộng lại, một tệp gốc 100 KB có thể được truyền qua mạng với kích thước chỉ khoảng 15–25 KB.

Nguồn Đã nén +gzip +Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

Các kỹ thuật được áp dụng

Kỹ thuật Chức năng
Loại bỏ khoảng trắng Xóa khoảng trắng, tab và dòng mới
Xóa chú thích Xóa // và /* */ (trừ !important)
Rút gọn tên biến (mangling) Đổi tên userName thành u (an toàn theo phạm vi)
Rút gọn tên thuộc tính Đổi tên obj.foo thành obj.a (KHÔNG AN TOÀN)
Gấp hằng số 1 + 2 + 3 → 6
Loại bỏ mã chết Xóa các nhánh sau return
Nội tuyến luồng điều khiển Nội tuyến các hàm nhỏ chỉ dùng một lần
Nén chuỗi ký tự (string literal) Hợp nhất các hằng chuỗi lặp lại

Chế độ an toàn so với chế độ mạnh

  • An toàn giữ nguyên tên biến và chỉ xóa khoảng trắng; rất phù hợp để gỡ lỗi khi bạn muốn dấu vết ngăn xếp dễ đọc.
  • Mặc định rút gọn tên biến cục bộ nhưng giữ nguyên tên toàn cục và tên thuộc tính; hoạt động tốt với hầu hết mã.
  • Mạnh rút gọn mọi thứ, kể cả tên thuộc tính. Nó thường làm hỏng mã truy cập thuộc tính một cách động (obj["prop"], Object.keys(obj)), trừ khi bạn đã cấu hình các tên dành riêng.

Khi nào nên thu nhỏ kích thước – và khi nào không nên

  • Hãy thực hiện tối ưu hóa kích thước (minify) trong môi trường sản xuất đối với mọi tài nguyên mà trình duyệt tải xuống.
  • Cần cung cấp bản đồ nguồn để công cụ DevTools trong trình duyệt vẫn có thể hiển thị các tên gốc khi gỡ lỗi.
  • Đừng thực hiện việc rút gọn mã trong quá trình phát triển – bạn sẽ lãng phí thời gian xây dựng và mất đi khả năng xác định các lỗi một cách dễ dàng.
  • Không nên rút gọn mã đã được rút gọn trước đó. Các tệp .min.js có thể bị thu nhỏ khoảng 1–3% khi được rút gọn lại, đồng thời tiềm ẩn nguy cơ xảy ra lỗi hoạt động.

Các lỗi phổ biến

– Không cấu hình các tên được bảo quản. Việc truy cập thuộc tính động (obj["payment_method"]) bị gián đoạn khi payment_method bị biến đổi thành a. – Bỏ quên các bản đồ nguồn: Nếu không có các tệp .map, các lỗi trong quá trình sản xuất sẽ không thể xác định được nguyên nhân. – Giảm kích thước các tệp CommonJS và ESM đồng thời. Các hệ thống mô-đun hỗn hợp cần được xử lý kỹ lưỡng bằng phương pháp “tree-shaking” trước khi thực hiện việc giảm kích thước.

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

Thông thường nhỏ hơn 40–70% khi chưa nén, và giảm thêm 60–75% khi nén bằng gzip hoặc Brotli. Một tệp nguồn 100 KB thường được truyền qua mạng với kích thước khoảng 15–25 KB.

Việc rút gọn mặc định (biến cục bộ) hầu như luôn an toàn. Việc rút gọn tên thuộc tính một cách mạnh mẽ sẽ làm hỏng mọi đoạn mã truy cập thuộc tính một cách động. Hãy cấu hình danh sách reserved cẩn thận trước khi kích hoạt.

Đúng vậy, hãy bật tùy chọn “Tạo bản đồ nguồn”; công cụ sẽ trả về mã đã được rút gọn cùng một tệp .map chứa thông tin ánh xạ từng byte trở lại nguồn gốc. Hãy tải cả hai tệp này lên CDN của bạn để DevTools có thể hiển thị các đường truy vết trình tự có thể đọc được.

Có – top-level await, trường lớp (class fields), phương thức riêng tư, hợp nhất null (nullish coalescing), chuỗi tùy chọn (optional chaining) và dấu phân cách số đều được hỗ trợ. Đối với các đề xuất rất mới (decorator giai đoạn 3), vui lòng kiểm tra cờ tương ứng.

Công cụ liên quan

Bảng tham chiếu ASCII

Bảng ASCII đầy đủ từ 0 đến 127 với giá trị thập phân, thập lục phân, bát phân, nhị phân và ký hiệu tham chiếu ký tự số HTML, gồm NUL, LF và DEL.

Tham chiếu ký tự HTML

Danh sách có thể tìm kiếm các thực thể HTML, mã tên và mã số tương ứng của chúng, cùng chức năng sao chép chỉ với một cú nhấp cho các ký tự đặc biệt và biểu tượng.

Bảng tham khảo phím tắt

Tìm phím tắt mặc định theo tài liệu của VS Code, Chrome và Bash dùng GNU Readline trên macOS, Windows và Linux.

Bảng tra cứu nhanh Markdown

Tài liệu Markdown thực dụng với bản xem trước thực tế và ví dụ có thể sao chép cho tiêu đề, danh sách, bảng, mã, liên kết, hình ảnh và cú pháp GFM.

Trình định dạng HTML

Định dạng HTML cục bộ trong trình duyệt với thụt lề hai hoặc bốn khoảng trắng. HTML không được tải lên hoặc xác thực.

Công cụ đổi PX sang PT

Đổi giá trị pixel CSS không âm sang điểm chữ theo công thức 1 px = 0,75 pt. Kết quả hiển thị tối đa bốn chữ số thập phân.

Công cụ này có phiên bản bằng các ngôn ngữ khác