Nén có làm đổi hành vi mã của tôi không?

Tự nó thì không. Terser phân tích mã và chỉ thực hiện những biến đổi nó chứng minh được là an toàn. Thứ duy nhất có thể làm hỏng là rút gọn tên, và chỉ khi có gì đó tra tên dưới dạng văn bản: eval, new Function, hay tiêm phụ thuộc đọc tên tham số. Công tắc đó nằm trên thanh công cụ.

Nó có khôi phục tệp đã nén về bản gốc không?

Nó làm cho dễ đọc, chứ không thành bản gốc. Làm đẹp trả lại thụt lề và dấu xuống dòng để bạn theo được mạch logic. Chú thích đã bị xóa và tên ngắn vẫn ngắn; chẳng gì lấy lại được "errorMessage" từ "e". Nếu bản build là của bạn, hãy phát hành kèm source map - đó là câu trả lời thật duy nhất.

Thiết lập đích thay đổi điều gì?

Nó cho Terser biết được phép sinh ra cú pháp nào. Với ES2020+ nó có thể dùng hàm mũi tên và các dạng hiện đại ngắn gọn khác; với ES5 thì không, nhờ vậy kết quả chạy được trên trình duyệt cũ. Nó không dịch mã của bạn - viết hàm mũi tên rồi chọn ES5 thì nó vẫn là hàm mũi tên. Việc đó cần một trình biên dịch như Babel.

Mã của tôi có bị gửi lên máy chủ không?

Không. Bản thân Terser được tải về trình duyệt của bạn và chạy ở đó, nên mã không bao giờ rời khỏi máy bạn. Đó là yếu tố quyết định để dựng trang theo cách này: thứ người ta dán vào một bộ nén thường là mã nguồn của một việc riêng tư, và một công cụ phải nhìn thấy nó mới nén được là đòi hỏi quá nhiều.

Nén và Làm Đẹp JavaScript - Terser ngay trong trình duyệt

2on / / Công cụ / Công cụ lập trình viên / Công cụ định dạng / Nén JavaScript

Nén và làm đẹp JavaScript

Đích

Rút gọn tên

Rút gọn tên cục bộ tiết kiệm nhiều byte nhất, nhưng làm hỏng mã tra tên dưới dạng văn bản - trong eval, new Function, hay một framework đọc tên tham số. Hãy tắt nếu bạn dựa vào những thứ đó.

JavaScript của bạn

var firstName = "Ada";
var lastName  = "Lovelace";
var fullName  = firstName + " " + lastName;

function greet(person, greeting) {
  // Nén xóa chú thích này; Làm đẹp giữ lại.
  const message = `${greeting}, ${person}!`;
  return message;
}

console.log(greet(fullName, "Hello"));

Công cụ này làm gì

Nén JavaScript không phải là xóa khoảng trắng. Làm bằng tìm-và-thay, bạn sẽ có những tệp trông ổn nhưng chạy khác đi, và khác biệt ấy chỉ lộ ra khi lên môi trường thật. Trang này chạy Terser - đúng bộ máy đứng sau bước build của phần lớn dự án - ngay trong trình duyệt của bạn.

Cách dùng

1 Dán JavaScript vào ô.
2 Chọn đích và quyết định có rút gọn tên hay không.
3 Bấm Nén - hoặc Làm đẹp để mở lại một tệp đã nén.

Vì sao phải phân tích chứ không tìm-và-thay

JavaScript tự đặt những dấu chấm phẩy bạn bỏ qua. Bỏ dấu xuống dòng giữa "return" và giá trị của nó, hàm sẽ bắt đầu trả về undefined - tệp vẫn hợp lệ, chỉ là nó làm chuyện khác. Cùng một ký tự, chỗ này là phép chia, chỗ kia là biểu thức chính quy. Phân biệt được chúng cần ngữ pháp chứ không phải mẫu khớp; vì thế trang này dùng một bộ phân tích thật.

Thứ thật sự nhỏ đi

Khoảng trắng và chú thích là phần nhỏ nhất. Tiết kiệm thật đến từ việc đổi tên biến cục bộ thành một chữ cái, gộp các khai báo rời thành một, tính sẵn hằng số và vứt bỏ mã không bao giờ chạy tới. Tất cả đều là thao tác trên cây - bộ nén phải biết hai cái tên trỏ về cùng một ràng buộc và giữa chúng không ai đọc nó.

Rút gọn tên cắn ở đâu

Bộ nén chỉ đổi tên được thứ nó nhìn thấy. Nó không thấy cái tên viết dưới dạng văn bản: eval("count + 1"), new Function("a", "return a"), hay một framework đọc tên tham số của hàm để quyết định tiêm gì vào. Những thứ đó vẫn đi tìm cái tên cũ và chẳng thấy gì. Đây là bản chất của ngôn ngữ chứ không phải lỗi của công cụ - vì vậy công tắc này để bạn quyết, không tự bật lặng lẽ.

Làm đẹp không trả lại tệp gốc

Làm đẹp trả lại thụt lề và dấu xuống dòng, nên tệp đã nén lại đọc được. Nhưng thứ đã bị vứt đi thì không quay lại: chú thích mất rồi, và nếu tên từng bị rút gọn thì vẫn ngắn - chẳng công cụ nào đoán được "e" từng là "errorMessage". Để gỡ lỗi một tệp trên môi trường thật, chỉ source map mới đưa bản gốc trở lại.

Nén JavaScript - câu hỏi thường gặp

Terser - hậu duệ của UglifyJS và là bộ nén mặc định trong webpack, Rollup và Vite. Đó chính là bộ máy mà bước build của bạn vẫn đang chạy, nên kết quả ở đây trùng với kết quả build chứ không phải xấp xỉ.

Công cụ định dạng dùng nhiều nhất

Mọi Thời Đại

Định Dạng HTML

Định Dạng JSON

Nén CSS

Định Dạng XML

Định Dạng SQL

Mới

Định Dạng SQL Chia một truy vấn dài thành các dòng dễ đọc, hoặc ép lại thành một dòng. Giữ nguyên kiểu chữ từ khóa, tên trong dấu nháy và chuỗi của bạn.

Xem trang

Phổ biến hôm nay

Nén CSS Nén CSS bằng cách bỏ chú thích và khoảng trắng, hoặc trải lại với thụt lề gọn gàng. Giữ nguyên khoảng trắng trong calc(), chuỗi và chú thích giấy phép.

Xem trang

Công cụ dành cho nhà phát triển liên quan

Định Dạng JSON Định dạng, nén và kiểm tra JSON ngay trên trình duyệt. Lỗi được chỉ rõ theo dòng và cột, cây gấp gọn cho thấy cấu trúc.

Định Dạng HTML Thụt lề đoạn HTML lộn xộn để đọc được, hoặc rút gọn để nó nhẹ hơn. Dùng được với cả đoạn rời, và không bao giờ viết lại mã của bạn thành thứ khác.

Định Dạng XML Thụt lề đoạn XML lộn xộn để đọc được, hoặc rút gọn cho nhẹ. Xử lý RSS, CDATA và namespace, và không bao giờ viết lại tài liệu của bạn.

Các công cụ khác bạn có thể thích

Word sang PDF Chuyển Word sang PDF miễn phí: tải lên tệp DOC, DOCX, ODT hoặc RTF và nhận bản PDF giữ đúng định dạng chỉ trong vài giây.

PDF sang Word Chuyển PDF sang Word miễn phí: tải lên tệp PDF và nhận file DOCX chỉnh sửa được trong vài giây - không đăng ký, không hình mờ.

Trình đếm từ Công cụ đếm từ miễn phí: dán văn bản để đếm từ, ký tự, câu, đoạn và xem thời gian đọc ước tính. Văn bản không rời khỏi trình duyệt.

Trình đếm ký tự Công cụ đếm ký tự miễn phí: đếm ký tự có và không có khoảng trắng, số từ, số dòng và kiểm tra giới hạn SEO cho tiêu đề, mô tả.

Trình kiểm tra mật độ từ khóa Công cụ kiểm tra mật độ từ khóa miễn phí: dán văn bản hoặc URL để xem tần suất của từng từ và cụm từ kèm tỷ lệ phần trăm.