Trình thu nhỏ JS

Trình thu nhỏ JS là công cụ miễn phí giúp loại bỏ các ký tự không cần thiết khỏi JavaScript, đồng thời cho biết số ký tự trước và sau khi thu nhỏ.

Thu nhỏ JavaScript giải quyết vấn đề gì?

Thu nhỏ JavaScript làm giảm lượng mã nguồn mà trình duyệt phải tải xuống. Quá trình này thường loại bỏ các thành phần định dạng như thụt lề, ngắt dòng và khoảng trắng ở những vị trí mà cú pháp JavaScript không yêu cầu.

Tệp script nhỏ hơn có thể giúp giảm dung lượng truyền và khối lượng công việc khi phân tích mã, nhất là khi trang web cung cấp nhiều gói mã lớn. Nén HTTP bằng Brotli hoặc gzip vẫn quan trọng vì thu nhỏ mã và nén khi truyền giải quyết hai phần khác nhau của vấn đề. Thu nhỏ loại bỏ ký tự khỏi mã nguồn, còn nén mã hóa dữ liệu lặp lại theo cách gọn hơn trong quá trình truyền.

Thao tác này thường được thực hiện trong bước build trước khi triển khai. Công cụ cũng hữu ích khi bạn cần kiểm tra một script chưa được thu nhỏ của bên thứ ba, so sánh kích thước các gói mã hoặc chuẩn bị một tệp độc lập cho trang web không có quy trình build.

Thu nhỏ thành công không chứng minh rằng JavaScript hoạt động đúng. Một script vẫn có thể chứa lệnh gọi API sai, biến không thể truy cập hoặc mã chỉ gặp lỗi khi chạy.

Cách dùng Trình thu nhỏ JS

Dán JavaScript vào trường JS rồi chạy công cụ, sau đó sao chép nội dung được trả về trong JS đã thu nhỏ. Hãy lưu tệp nguồn gốc trong hệ thống quản lý phiên bản và triển khai bản rút gọn, thay vì ghi đè lên mã nguồn dễ đọc.

1. Trước tiên, hãy kiểm tra cú pháp, chạy linter và các bài kiểm thử tự động trên mã nguồn.
2. Dán toàn bộ script vào JS, bao gồm mọi lệnh nhập mô-đun hoặc hàm bao thuộc về tệp đó.
3. Xem Số ký tự JS và Số ký tự JS đã thu nhỏ để biết số ký tự đã thay đổi như thế nào.
4. Kiểm tra xem JavaScript đã thu nhỏ có chạy đúng trong cùng trình duyệt và môi trường triển khai với tệp dùng trong thực tế hay không.
5. Nếu lưu cả bản thu nhỏ và bản dễ đọc cùng nhau, hãy dùng tên tệp dễ nhận biết như app.min.js.

Quá trình xử lý diễn ra trên máy chủ. Dữ liệu bạn nhập được gửi đến máy chủ qua HTTPS và không được lưu trữ. Tuy nhiên, máy chủ vẫn phải nhận JavaScript để xử lý, vì vậy đừng gửi mã nguồn mà tổ chức của bạn không cho phép chuyển đến dịch vụ bên ngoài.

Kết quả thu nhỏ gồm những gì?

Kết quả gồm JavaScript đã thu nhỏ và hai số đếm ký tự. Số ký tự JS là độ dài dữ liệu đầu vào, còn Số ký tự JS đã thu nhỏ là độ dài của nội dung JS đã thu nhỏ được trả về.

Các số liệu này được tính bằng hàm mb_strlen của PHP. Hàm đo độ dài chuỗi nhiều byte, thay vì chỉ báo cáo số byte. Vì vậy, số ký tự không đồng nghĩa với dung lượng truyền cuối cùng qua mạng. Một ký tự UTF-8 có thể chiếm nhiều byte, còn gzip hoặc Brotli có thể tiếp tục giảm dung lượng tệp được truyền.

Công cụ này không trả về trường xác thực hoặc chẩn đoán riêng. Đừng kỳ vọng công cụ phát hiện mọi dấu ngoặc bị thiếu, biểu thức chính quy sai định dạng hoặc tính năng ngôn ngữ không được hỗ trợ. Đặc biệt, các lỗi thường gắn với JSON, chẳng hạn tên thuộc tính không có dấu ngoặc kép hoặc dấu phẩy ở cuối, không phải là cách đáng tin cậy để kiểm tra JavaScript vì cú pháp đối tượng JavaScript khác với cú pháp JSON. Hãy dùng Trình xác thực & làm đẹp JSON cho dữ liệu JSON.

Ví dụ ngắn và các trường hợp đầu vào phức tạp

Một thay đổi đơn giản về khoảng trắng có thể được thể hiện như sau.

Đầu vào

function add(a, b) { return a + b; }

Dạng thu gọn

function add(a,b){return a+b;}

Phần định dạng quanh một đối tượng cũng có thể được loại bỏ mà không làm thay đổi giá trị thuộc tính.

Đầu vào

const settings = { theme: "dark", retries: 2 };

Dạng thu gọn

const settings={theme:"dark",retries:2};

Cách định dạng chính xác có thể khác nhau giữa các công cụ thu nhỏ, nhất là quanh dấu chấm phẩy không bắt buộc. Không thể thu gọn JavaScript một cách an toàn bằng cách xóa mọi khoảng trắng hoặc ngắt dòng. Quá trình thu nhỏ an toàn phải xét đến ngữ cảnh từ vựng và cú pháp để phân biệt phần định dạng với những ký tự ảnh hưởng đến chương trình.

• Khoảng trắng trong chuỗi là dữ liệu. Khoảng trắng trong "Newcastle upon Tyne" phải được giữ nguyên.
• Dấu câu có thể thuộc về cú pháp. Xóa khoảng trắng khỏi a + +b có thể tạo ra một chuỗi token khác.
• Ngắt dòng đôi khi ảnh hưởng đến cơ chế tự động chèn dấu chấm phẩy, bao gồm mã đứng sau return, break hoặc continue. Không được ngắt dòng ngay sau throw vì biểu thức của lệnh này phải bắt đầu trên cùng một dòng.
• Ký tự có dấu và ký tự không thuộc bảng chữ cái Latin có thể xuất hiện trong chuỗi và, nếu quy tắc đặt định danh của JavaScript cho phép, trong cả định danh. Kích thước theo byte của chúng có thể khác với số ký tự.
• Số là token trong mã nguồn, không phải chỉ dẫn về số lượng ký tự. Công cụ thu nhỏ phải giữ nguyên ý nghĩa số học, ngay cả khi chọn một cách biểu diễn tương đương ngắn hơn.

Khi nào không đáng để thu nhỏ JavaScript?

Thường không đáng để thu nhỏ lại một tệp đã được thu nhỏ. Lần xử lý thứ hai có thể chỉ tiết kiệm rất ít hoặc không tiết kiệm được gì, đồng thời khiến đầu ra của quy trình build khó truy vết hơn và có khả năng ảnh hưởng đến source map hiện có.

Cũng không có nhiều lý do để làm đẹp rồi lại thu nhỏ JavaScript nếu chỉ máy móc đọc tệp đó. Hãy giữ mã nguồn dễ đọc để bảo trì và dùng mã nguồn ấy tạo các tệp triển khai. Với một ứng dụng đã vận hành ổn định, công cụ build như esbuild, Rollup hoặc webpack thường phù hợp hơn vì có thể tự động đóng gói mô-đun và tạo source map. Tính năng thu nhỏ có thể được tích hợp sẵn hoặc bổ sung qua cấu hình hay plugin, còn Terser là một công cụ chuyên dùng để thu nhỏ mã.

Đừng xem thu nhỏ mã là biện pháp làm rối mã hoặc kiểm soát truy cập. Tên hàm và biến có thể vẫn hiển thị, chuỗi ký tự vẫn có thể đọc được, còn công cụ dành cho nhà phát triển trong trình duyệt có thể định dạng lại mã đã thu gọn. Tuyệt đối không nhúng bí mật, khóa riêng tư và thông tin xác thực đặc quyền vào JavaScript phía máy khách.

Nếu đang chuẩn bị toàn bộ tài nguyên tĩnh của một trang, bạn có thể dùng Trình thu nhỏ CSS và Trình thu nhỏ HTML để thực hiện thao tác tương ứng cho các định dạng đó. Hãy xử lý từng định dạng bằng đúng công cụ riêng vì quy tắc phân tích cú pháp và khoảng trắng của chúng khác nhau.

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

Công cụ có tạo source map không?

Không có trường source map nào được trả về. Nếu cần ánh xạ stack trace trong môi trường thực tế về các tệp gốc, hãy tạo script đã thu nhỏ và tệp .map tương ứng trong cùng một quy trình build. Triển khai source map từ một bản build khác có thể làm sai lệch tham chiếu đến dòng và cột.

Thu nhỏ mã có ngăn người khác sao chép JavaScript của tôi không?

Không. Trình duyệt phải nhận mã phía máy khách có thể thực thi, nên khách truy cập vẫn có thể tải xuống và kiểm tra mã. Thu nhỏ khiến mã nguồn khó đọc hơn nhưng không đảm bảo tính bí mật, không thực thi điều khoản cấp phép và không bảo vệ đáng kể các bí mật được nhúng trong mã.

Tôi có thể dán mã chứa khóa API không?

Bạn không nên dán khóa API bí mật, token hoặc thông tin xác thực riêng tư. Dữ liệu đầu vào được gửi qua HTTPS và không được lưu trữ, nhưng quá trình xử lý diễn ra trên máy chủ. Các khóa công khai dùng trong trình duyệt, vốn được chủ động phân phối cho mọi khách truy cập, vẫn cần được giới hạn theo tên miền, nguồn gốc, hạn ngạch hoặc quyền nếu dịch vụ liên quan hỗ trợ.

Giảm số ký tự có luôn giúp trang tải nhanh hơn không?

Không. Hiệu quả còn phụ thuộc vào kích thước tệp ban đầu, bộ nhớ đệm, điều kiện kết nối, cơ chế nén của máy chủ và lượng JavaScript mà trình duyệt phải phân tích rồi thực thi. Ngoài tổng số ký tự, hãy kiểm tra cả dung lượng truyền sau khi nén và hoạt động khi chạy.

Sau khi thu nhỏ, tôi có nên giữ phần mở rộng .js không?

Có. JavaScript đã thu nhỏ thường vẫn dùng phần mở rộng .js, còn .min.js là quy ước đặt tên khi có cả hai phiên bản. Trước khi triển khai, hãy xác nhận máy chủ gửi loại nội dung JavaScript phù hợp và mã HTML hoặc lệnh nhập mô-đun trỏ đến đúng tệp cần dùng.