Chuyển đổi miễn phí

JavaScript Công cụ khai thác

Giảm thiểu và nén mã JavaScript ngay lập tức trong trình duyệt của bạn. Xóa nhận xét, thu gọn khoảng trắng và giảm kích thước tệp. Miễn phí và riêng tư.

Kéo và thả tệp JS vào đây

Hỗ trợ các tệp .js. Hoặc dán JavaScript của bạn ở trên.

Hoặc

Về công cụ này

Việc rút gọn JavaScript giúp giảm kích thước mã nguồn bằng cách loại bỏ các ký tự không cần thiết và (với các bộ rút gọn thích hợp) đổi tên các biến cục bộ thành tên ngắn hơn. Danh mục đầu tiên - xóa khoảng trắng và nhận xét - rất đơn giản và không có rủi ro. Cách thứ hai — đổi tên biến — yêu cầu hiểu các quy tắc phạm vi và đó là điều mà các công cụ thu nhỏ sản xuất như Terser và esbuild làm tốt nhất.

Công cụ này tập trung vào việc thu nhỏ an toàn: loại bỏ nhận xét, thu gọn khoảng trắng, loại bỏ dấu chấm phẩy dư thừa và rút ngắn các mẫu rõ ràng. Việc đổi tên biến là thận trọng - chỉ các biến cục bộ trong phạm vi rõ ràng mới được chạm vào và các tên được tham chiếu bên ngoài được giữ nguyên. Kết quả có chức năng giống hệt với nguồn.

Để thu nhỏ cấp độ sản xuất, các công cụ chuyên dụng (Terser, esbuild, swc) hiểu mô hình phạm vi ECMAScript đầy đủ và tạo ra đầu ra nhỏ hơn đáng kể. Công cụ này dùng để thu nhỏ nhanh chóng phía trình duyệt khi không có sẵn thiết lập bản dựng đầy đủ.

Tại sao giảm thiểu JavaScript

Các gói JavaScript thường là tài nguyên lớn nhất trên một trang web hiện đại. Việc thu nhỏ thường xuyên tạo ra mức giảm kích thước 30–60% so với nguồn chưa được tối ưu hóa. Kết hợp với gzip hoặc Brotli, mức giảm sẽ giảm đi phần nào nhưng sự kết hợp này vẫn tiết kiệm được số byte có thể đo được — đặc biệt đối với người dùng có kết nối chậm.

JavaScript nhanh hơn cũng có nghĩa là Thời gian tương tác nhanh hơn. Các tập lệnh nhỏ hơn tải xuống nhanh hơn, phân tích cú pháp nhanh hơn và thực thi sớm hơn. Đối với các trang web mà TTI ảnh hưởng đến tỷ lệ thoát và xếp hạng SEO, việc thu nhỏ là một trong những chiến thắng rẻ nhất hiện có.

Cách sử dụng

Dán JavaScript, lấy phiên bản nhỏ hơn.

  1. Thêm đầu vào JavaScript: Dán nguồn vào vùng nhập hoặc thả tệp .js. Công cụ khai thác chấp nhận JavaScript hiện đại (ES2015+) bao gồm các hàm mũi tên, chữ mẫu, lớp và mô-đun.
  2. Chọn tùy chọn: Mặc định loại bỏ nhận xét và thu gọn khoảng trắng. Việc đổi tên biến cục bộ là thận trọng; cho phép đổi tên tích cực hơn nếu bạn cần nén tối đa.
  3. Giảm thiểu: Công cụ khai thác phân tích nguồn, loại bỏ khoảng trắng và nhận xét, đồng thời tạo ra đầu ra nhỏ gọn. Lỗi cú pháp trong nguồn tạo ra thông báo lỗi rõ ràng.
  4. Sử dụng đầu ra: Thay thế nguồn tập lệnh của bạn trong quá trình sản xuất. Để tối ưu hóa hoàn toàn, hãy kết hợp với một gói xử lý việc loại bỏ mã chết và rung cây.

Các trường hợp sử dụng phổ biến

Chi tiết kỹ thuật

Công cụ khai thác mã hóa JavaScript bằng cách sử dụng trình phân tích cú pháp tôn trọng cú pháp ECMAScript. Các nhận xét (một dòng và nhiều dòng) sẽ bị xóa ngoại trừ các nhận xét về giấy phép được đánh dấu bằng /*! tiền tố. Khoảng trắng được thu gọn trừ khi được yêu cầu về mặt cú pháp (giữa các mã định danh, sau các từ khóa).

Việc đổi tên biến thận trọng sẽ rút ngắn các biến cục bộ trong phạm vi đơn giản. Tên toàn cầu, tên xuất và tên nhập không được đổi tên - điều đó sẽ phá vỡ các tham chiếu bên ngoài. Để đổi tên sâu hơn, hãy sử dụng Terser hoặc esbuild với phân tích nhận biết mô-đun thích hợp.

Các trường hợp cạnh: chèn dấu chấm phẩy tự động (ASI) có nghĩa là công cụ rút gọn phải giữ nguyên dòng mới trong một số ngữ cảnh để tránh thay đổi hành vi của chương trình. Các chữ mẫu, các chữ biểu thức chính quy và JSX (nếu đầu vào bao gồm nó) được giữ nguyên chính xác vì nội dung của chúng có thể không an toàn để nén.

Thực tiễn tốt nhất

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

Việc thu nhỏ có thay đổi cách hoạt động của mã của tôi không?
Không. Tính năng thu nhỏ sẽ loại bỏ khoảng trắng và nhận xét, điều này không ảnh hưởng đến việc thực thi. Rút ngắn biến (xáo trộn) đổi tên các biến cục bộ nhưng vẫn giữ nguyên hành vi. Các biến toàn cục và tên xuất được giữ nguyên.
Tôi nên giảm thiểu trong quá trình phát triển hay sản xuất?
Chỉ sử dụng mã rút gọn trong sản xuất. Trong quá trình phát triển, hãy giữ mã gốc có thể đọc được. Hầu hết các công cụ xây dựng (Webpack, Vite, esbuild) đều tự động xử lý việc thu nhỏ như một phần của quy trình xây dựng sản xuất.
Sự khác biệt giữa thu nhỏ và che giấu là gì?
Việc thu nhỏ làm giảm kích thước trong khi vẫn giữ cho mã có thể đọc được về mặt chức năng nếu được định dạng. Sự xáo trộn có chủ ý làm cho mã khó hiểu (mã hóa chuỗi, làm phẳng luồng điều khiển). Công cụ này tập trung vào việc giảm kích thước chứ không phải làm xáo trộn.
Tôi nên mong đợi giảm kích thước bao nhiêu?
Thông thường là 30-60% trước gzip. Mã được nhận xét tốt với tên biến dài sẽ có mức giảm lớn nhất. Kết hợp với nén gzip, file JavaScript thường nhỏ hơn 80-90% so với nguồn ban đầu.
Mã của tôi có được tải lên máy chủ không?
Không. Công cụ khai thác chạy trong trình duyệt của bạn.
JavaScript của tôi sẽ nhỏ hơn bao nhiêu?
Thông thường giảm 30–60%. Mã nhiều biến với mã định danh dài sẽ nén nhiều hơn; mã nặng biểu thức nén ít hơn.
Tôi có nên thu nhỏ bằng tay không?
Không bao giờ. Duy trì JavaScript có thể đọc được trong nguồn. Chạy thu nhỏ dưới dạng bước xây dựng hoặc là một phần của quá trình triển khai.
Nó có hoạt động trên TypeScript không?
Trước tiên, TypeScript cần được biên dịch sang JavaScript bằng tsc hoặc esbuild. Sau khi được biên dịch, JavaScript kết quả có thể được thu nhỏ.