Rút gọn JavaScript _

Cách rút gọn JavaScript hoạt động

Terser hoạt động qua bốn giai đoạn trên Abstract Syntax Tree của mã bạn. Mỗi giai đoạn độc lập, vì vậy bạn có thể bật hoặc tắt bất kỳ giai đoạn nào mà không làm hỏng các giai đoạn khác.

1. Phân tích. Terser phân tích JavaScript của bạn thành AST. Mọi lỗi cú pháp đều xuất hiện ở đây với token và dòng gây ra nó, vì vậy bạn tìm ra vấn đề thực sự trước khi bất kỳ biến đổi nào chạy. Bộ phân tích chấp nhận mọi cấu trúc ECMAScript chuẩn đến các đề xuất stage-4 mới nhất.
2. Nén. Bộ nén duyệt AST và áp dụng hàng chục biến đổi giữ ngữ nghĩa: constant folding, loại bỏ nhánh dead, inline hóa các hàm thuần ngắn, thu gọn khai báo var tuần tự, và viết lại các dạng câu lệnh tương đương (if/else thành ternary, rút gọn chuỗi so sánh, thu gọn conditional return). Mọi biến đổi đều có thể đảo ngược về nguyên tắc; bộ nén không bao giờ thay đổi hành vi quan sát được.
3. Mangle. Bộ mangler đổi tên các ràng buộc cục bộ thành định danh ngắn duy nhất (a, b, c, …) trong mỗi scope. Chỉ các tên không thể vượt ra ngoài ranh giới module mới được đổi tên, vì vậy các ràng buộc export, khóa thuộc tính và tham chiếu global vẫn nguyên vẹn. Kết quả là khoản tiết kiệm byte lớn nhất trong bất kỳ giai đoạn nào.
4. Render. Terser in AST đã biến đổi trở lại thành chuỗi JavaScript với khoảng trắng thu gọn và dấu tách câu lệnh giảm xuống mức tối thiểu mà ngữ pháp chấp nhận. Chú thích bị xóa trừ khi nút gạt giữ giấy phép giữ lại các khối /*! … */, mà hầu hết giấy phép CDN yêu cầu bạn giữ lại.

Tại sao rút gọn JavaScript

• Tải trang nhanh hơn. Script nhỏ hơn được phân tích và thực thi sớm hơn. Trên kết nối di động 4G, giảm 40% byte cắt giảm thực sự vài giây Time to Interactive, là chỉ số Google PageSpeed Insights đo lường tích cực nhất.
• Hóa đơn egress CDN thấp hơn. CloudFront, Cloudflare và Fastly tính phí theo gigabyte egress. Giảm 40% script trên hàng triệu lượt xem trang hàng tháng cộng lại thành tiết kiệm thực sự trước bất kỳ công việc hình ảnh hay CSS nào. Phép tính vẫn đúng ngay cả sau gzip và brotli — rút gọn loại bỏ các token mà bộ nén sẽ phải mã hóa.
• Bộ rút gọn này không đánh thuế trang của bạn. Terser ~1 MB chưa nén. Hầu hết các bộ rút gọn trực tuyến gửi toàn bộ thư viện khi tải trang, làm giảm điểm Lighthouse của chính chúng và làm trang cảm thấy chậm chạp trước khi người dùng gõ bất kỳ thứ gì. Trang này lazy-load Terser chỉ khi bạn nhấp Rút gọn hay bật Chế độ trực tiếp — vì vậy render ban đầu vẫn dưới ngưỡng Core Web Vitals mà công cụ hứa giúp bạn đạt được.
• Đạt Core Web Vitals. Lighthouse và PageSpeed Insights đánh dấu JavaScript lớn là nguyên nhân trực tiếp của Total Blocking Time kém. Rút gọn thư viện vendor và bundle ứng dụng là chiến thắng nhanh nhất trong kiểm tra "Giảm JavaScript không dùng" và "Loại bỏ module trùng lặp" của Lighthouse — thường là khoản giảm một lần đáng giá mười hay hai mươi điểm.

Ứng dụng phổ biến

Rút gọn JavaScript xuất hiện ở hầu hết mọi giai đoạn của một dự án web hiện đại.

• Hook pre-commit: rút gọn các script tiện ích riêng lẻ trước khi commit vào repo để artifact đã commit sẵn sàng cho sản xuất và diff hiển thị thay đổi logic thay vì nhiễu khoảng trắng.
• Kiểm tra widget của bên thứ ba: dán đoạn nhúng của vendor và kiểm tra xem nó đã được rút gọn chưa hay có thể thu nhỏ thêm trước khi phục vụ hàng triệu người dùng.
• Dọn dẹp script cũ: nén các plugin jQuery cũ và script viết tay trước build pipeline hiện tại của bạn, mà không cần chạm vào source tree.

Ví dụ thực tế

Lấy một hàm nhỏ: function add(firstNumber, secondNumber) { /* tính tổng hai số */ return firstNumber + secondNumber; } console.log(add(1, 2)); — khoảng 130 byte bao gồm chú thích. Dán ở trên với Mangle và Compress cả hai được bật. Đầu ra rút ngắn thành khoảng function add(n,o){return n+o}console.log(add(1,2)); — khoảng 55 byte, giảm 58%. Tên hàm add tồn tại vì nó được tham chiếu trong lệnh gọi console.log; tên tham số firstNumber và secondNumber rút ngắn thành một chữ cái vì chúng là cục bộ trong thân hàm. Tắt Mangle để giữ tên tham số có thể đọc được trong khi vẫn thu gọn khoảng trắng và xóa chú thích.

FAQ

Công cụ này chạy trong trình duyệt của tôi không?

Có. Terser được lazy-load lần đầu tiên bạn nhấp Rút gọn hay bật Chế độ trực tiếp — khoảng 200 KB nén xuống vào bộ nhớ cache của trình duyệt, sau đó không có gì tiếp theo được tải xuống. Mã của bạn không bao giờ rời khỏi trang.

Mangle tên là gì và nó có an toàn không?

Mangling đổi tên biến cục bộ thành một chữ cái để tiết kiệm byte. Nó an toàn cho các script tự chứa và các IIFE bundle vì việc đổi tên không bao giờ vượt ra ngoài scope. Nó KHÔNG an toàn cho các script expose globals theo tên (ví dụ window.myLib = …) mà không có wrapper. Tắt Mangle khi không chắc chắn.

Tại sao mã của tôi bị hỏng sau khi rút gọn?

Ba nguyên nhân thường gặp: eval hay with tham chiếu biến theo chuỗi; đọc Function.name hay arguments.callee phụ thuộc vào định danh gốc; hoặc globals expose theo tên đã bị đổi tên. Tắt Mangle trước để xác định xem đổi tên hay biến đổi Compress là nguyên nhân.

Công cụ có hỗ trợ cú pháp hiện đại (ES2020+) không?

Có. Đặt mục tiêu ECMAScript là ES2020 hay Next và Terser giữ nguyên optional chaining, nullish coalescing, top-level await và toán tử logical-assignment. Đặt ES5 và Terser down-compile nơi có thể, nhưng nó không phải transpiler đầy đủ — dùng Babel cho cú pháp ES5 không thể biểu diễn được.

Rút gọn JavaScript phía trình duyệt với Terser cho bạn đầu ra chất lượng sản xuất mà không cần thêm build tool. Dán script, chọn mục tiêu ECMAScript, sao chép hay tải về kết quả. Không tải lên, không tài khoản, không build pipeline. Bộ rút gọn chỉ tải khi bạn yêu cầu — vì vậy mở trang này chỉ tốn vài kilobyte, không phải megabyte.