Chuyển đến nội dung
🛠️
Whiz Tools

Trình Nén JavaScript - Công Cụ Tối Ưu Hóa Mã JS Miễn Phí

Công cụ nén JavaScript miễn phí để giảm kích thước mã bằng cách loại bỏ khoảng trắng và nhận xét. Tối ưu hóa tệp JS ngay lập tức mà không cần cài đặt.

Trình nén JavaScript

Về công cụ này

Trình nén JavaScript đơn giản này loại bỏ khoảng trắng và nhận xét không cần thiết để giảm kích thước mã của bạn. Nó giữ nguyên chức năng trong khi làm cho mã của bạn gọn hơn.

  • Loại bỏ khoảng trắng không cần thiết (khoảng trắng, tab, dòng mới)
  • Loại bỏ nhận xét (cả nhận xét một dòng và nhiều dòng)
  • Giữ nguyên các chuỗi ký tự và biểu thức chính quy
  • Duy trì chức năng mã
Máy tính tải...
📚

Tài liệu hướng dẫn

Trình thu nhỏ JavaScript là gì?

Trình thu nhỏ JavaScript là công cụ làm ngắn mã nguồn JavaScript bằng cách loại bỏ các ký tự mà trình duyệt không cần để chạy mã, chẳng hạn như khoảng trắng thừa, ngắt dòng và chú thích. Sau khi thu nhỏ, mã vẫn thực hiện chính xác cùng một chức năng. Chỉ kích thước tệp thay đổi.

Các tệp JavaScript nhỏ hơn được tải xuống và tải nhanh hơn, vì vậy thu nhỏ là bước thường được thực hiện trước khi một trang web được đưa vào hoạt động.

Cách thức thu nhỏ JavaScript hoạt động

Công cụ này đọc mã từng ký tự một rồi xây dựng lại, loại bỏ mọi thứ cần thiết cho người đọc nhưng không cần thiết đối với bộ máy JavaScript. Công cụ loại bỏ:

  • Chú thích, gồm cả chú thích // single-line một dòng và chú thích /* multi-line */ nhiều dòng, kể cả chú thích theo kiểu JSDoc.
  • Khoảng trắng thừa, ký tự tab và các dòng trống chỉ tồn tại để mã dễ đọc hơn.

Công cụ không thêm hoặc xóa bất kỳ thứ gì khác. Công cụ không bao giờ xóa dấu chấm phẩy, dấu ngoặc đơn hay bất kỳ ký tự nào khác vốn đã có trong mã, và cũng không chèn dấu câu mới. Công cụ cũng giữ nguyên một số thành phần:

  • Văn bản bên trong chuỗi ("like this", 'like this') và chuỗi mẫu (`like this`), ngay cả khi văn bản đó chứa khoảng trắng hoặc trông giống chú thích.
  • Các biểu thức chính quy dạng ký tự, chẳng hạn như /[a-z]+/g, cùng với tất cả cờ của chúng: d, g, i, m, s, u, v và y.
  • Mọi dấu chấm phẩy, dấu phẩy và dấu ngoặc mà mã gốc đã có.

Đôi khi không thể xóa khoảng trắng giữa hai token mà không làm thay đổi ý nghĩa của chúng. return a không thể trở thành returna, vì khi đó nó sẽ được đọc thành một từ duy nhất. Điều tương tự cũng áp dụng cho các tên được viết bằng những chữ cái ngoài bảng chữ cái tiếng Anh, vì vậy typeof π vẫn giữ khoảng trắng. Khi việc xóa khoảng trắng làm hai token nhập lại thành một, công cụ giữ lại một khoảng trắng duy nhất.

Ngắt dòng cũng có thể có ý nghĩa. JavaScript đôi khi tự động chèn dấu chấm phẩy ở cuối dòng; quy tắc này được gọi là tự động chèn dấu chấm phẩy. Nếu xóa một ngắt dòng có thể kích hoạt hoặc ngăn quy tắc đó, hoặc nếu ngắt dòng đứng sau dấu ngoặc nhọn đóng }, công cụ giữ lại một ký tự xuống dòng duy nhất tại đó. Vì vậy, mã đã thu nhỏ không phải lúc nào cũng được dồn vào một dòng: một số ngắt dòng làm thay đổi ý nghĩa của mã và phải được giữ lại.

Cách sử dụng trình thu nhỏ JavaScript này

  1. Dán mã JavaScript vào ô nhập.
  2. Chọn "Thu nhỏ".
  3. Đọc kết quả trong ô xuất, cùng với kích thước ban đầu, kích thước sau khi thu nhỏ và phần trăm giảm kích thước.
  4. Chọn "Sao chép" để sao chép mã đã thu nhỏ.

Việc thu nhỏ diễn ra bên trong tab trình duyệt, vì vậy mã không được tải lên bất kỳ đâu để xử lý. Công cụ cũng sao chép mã đã dán vào địa chỉ trang, nhờ đó có thể dễ dàng đánh dấu hoặc chia sẻ kết quả. Do đó, bất kỳ ai xem được địa chỉ đó đều có thể xem mã.

Ví dụ: thu nhỏ một hàm

Trước:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Sau:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Cả ba chú thích đều biến mất và phần thụt lề cũng được loại bỏ. Dấu chấm phẩy sau a+b vẫn còn, vì công cụ không bao giờ xóa dấu chấm phẩy vốn đã có. Ngắt dòng trước const cũng vẫn còn, vì nó đứng sau dấu ngoặc nhọn đóng }.

Ví dụ: thu nhỏ một lớp

Trước:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Sau:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Lưu ý rằng một ngắt dòng vẫn được giữ lại trước mỗi phương thức và trước dấu ngoặc nhọn đóng của lớp }. Trong mã gốc, mỗi ngắt dòng đó đều đứng sau một dấu ngoặc nhọn đóng }, nên quy tắc bảo vệ Tự động chèn dấu chấm phẩy giữ chúng lại. Các dấu chấm phẩy bên trong từng phương thức cũng được giữ lại.

Công thức tính mức giảm kích thước

Công cụ báo cáo ba con số bên dưới ô xuất: kích thước ban đầu, kích thước sau khi thu nhỏ và mức giảm. Tất cả kích thước đều là số lượng ký tự, không phải byte. Mức giảm là một tỷ lệ phần trăm, được làm tròn đến số nguyên gần nhất:

1reduction = round((1 - minified characters / original characters) x 100)
2

Ví dụ về hàm ở trên có 213 ký tự trước khi thu nhỏ và 103 ký tự sau đó. Vì vậy, 1–103 / 213 = 0,5164, tương đương 51,64%, và công cụ hiển thị 52%. Ví dụ về lớp giảm từ 515 ký tự xuống còn 304 ký tự, tương đương 40,97%, được hiển thị là 41%.

Giới hạn của trình thu nhỏ này

Công cụ này chỉ loại bỏ chú thích và khoảng trắng. Không giống các công cụ trong bước xây dựng như Terser hoặc UglifyJS, công cụ không đổi tên biến, xóa mã không được sử dụng hoặc gộp tệp. Những công cụ đó thường tạo ra đầu ra nhỏ hơn nhưng cần một quy trình xây dựng để chạy. Công cụ này hoạt động ngay trong trình duyệt mà không cần thiết lập, phù hợp với việc kiểm tra nhanh hoặc các đoạn mã nhỏ hơn là một quy trình triển khai hoàn chỉnh trong môi trường sản xuất.

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

Trình thu nhỏ JavaScript loại bỏ những gì?

Công cụ loại bỏ chú thích và khoảng trắng không cần thiết để mã chạy. Công cụ không xóa dấu chấm phẩy, dấu ngoặc hay bất kỳ ký tự nào khác vốn đã là một phần của mã.

Việc thu nhỏ JavaScript có thay đổi cách mã chạy không?

Không. Mã đã thu nhỏ phải cho ra cùng kết quả như mã gốc. Chỉ cách định dạng thay đổi.

Tại sao mã đã thu nhỏ đôi khi vẫn có ngắt dòng?

Một ngắt dòng có thể được yêu cầu bởi quy tắc Tự động chèn dấu chấm phẩy của JavaScript, hoặc có thể đứng sau dấu ngoặc nhọn đóng }. Việc xóa nó có thể làm thay đổi chức năng của mã, vì vậy công cụ giữ lại một ký tự xuống dòng duy nhất tại những vị trí đó thay vì xóa nó.

Thu nhỏ có giống với nén không?

Không. Thu nhỏ loại bỏ ký tự khỏi chính mã nguồn. Nén, chẳng hạn như gzip hoặc Brotli, mã hóa tệp theo cách khác để truyền qua mạng. Các trang web thường sử dụng cả hai cùng nhau.

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

Bản thân trình thu nhỏ chạy hoàn toàn trong tab trình duyệt và mã không được tải lên để thu nhỏ. Mã đã dán được lưu trong địa chỉ trang để có thể chia sẻ hoặc đánh dấu kết quả, nên nó xuất hiện trên thanh địa chỉ và trong lịch sử trình duyệt.

Mã đã thu nhỏ có thể được khôi phục về bản gốc không?

Trình định dạng mã có thể khôi phục khoảng trắng, nhưng chú thích cùng tên biến và tên hàm ban đầu sẽ mất, trừ khi một bản đồ mã nguồn riêng đã được lưu.

Tài liệu tham khảo

  1. MDN Web Docs. "Minification." Bảng thuật ngữ MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," phần 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," mục 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," mục 22.2.6, "Properties of the RegExp Prototype Object" (bộ cờ d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object