Initializing, please wait a moment

Unminify JS: Khôi Phục Khả Năng Đọc JavaScript Đã Minify

JavaScript minified - loại phát hành bởi bundler dưới tên như bundle.min.js - là một dòng dày đặc với tên biến một ký tự và không ngắt dòng. Công cụ tại https://freetoolonline.com/developer-tools/js-unminifier.html phục hồi định dạng dễ đọc hoàn toàn trong trình duyệt, không cần upload gì.

Thuộc tínhGiá trị
Hình thứcCông cụ online, không cài đặt
Tốc độPhía trình duyệt; kết quả dễ đọc trong vài giây
Quyền riêng tưMã nguồn ở lại trên thiết bị; không upload gì
Đổi tên biếnKhông thực hiện - tên một ký tự vẫn là một ký tự
Công cụ triển khaihttps://freetoolonline.com/developer-tools/js-unminifier.html

Unminify thực sự làm gì (và không thể làm gì)

Unminify thực sự làm gì là chèn lại khoảng trắng, ngắt dòng và thụt lề cho JavaScript đã minify để đọc bundle một dòng - không khôi phục tên định danh bị rút gọn lúc minify.

Hướng dẫn ba phút

Hướng dẫn ba phút: dán JS minify vào JS Unminifier, chạy beautify, sao chép kết quả thụt lề - trong trình duyệt, không tải code lên máy chủ chuyển đổi.

  1. Sao chép bundle minified. Mở file .min.js trong editor hoặc trong tab network của trình duyệt (Response body), chọn tất cả, sao chép.
  2. Dán vào editor. Mở https://freetoolonline.com/developer-tools/js-unminifier.html và dán vào khung đầu vào. Bundle dài - hàng trăm KB trở lên - chạy được, nhưng đôi lần format mất một hai giây khi parser đi qua AST.
  3. Click Unminify. Khung bên phải hiện đầu ra đã thụt lề. Sao chép kết quả quay lại editor hoặc lưu thành file .js nội bộ để đọc theo kiểu grep.

Đầu ra unminified giúp ở chỗ nào và không giúp ở chỗ nào

Đọc code bên thứ ba sau unminify hữu ích trong ba tình huống cụ thể. Một, kiểm định lỗ hổng - khi một CVE nêu tên một hàm trong bundle của nhà cung cấp, unminify cho bạn xác định các điểm gọi và đọc luồng xung quanh mà không cần dựng lại repo gốc. Hai, xác nhận hành vi - khi hành vi một thư viện trôi giữa các phiên bản, so sánh bản unminified hiện thay đổi nhanh hơn nhiều so với đọc dạng dày đặc một dòng. Ba, xác minh đầu ra build - khi pipeline của bạn xuất ra một bundle bị nhân đôi polyfill một cách khó hiểu, dạng unminified hiện các khối IIFE trùng lặp trong tích tắc. Unminify không giúp khi mục tiêu là tên ngữ nghĩa gốc; với việc đó, hãy ban hành source map cùng bundle và load vào debugger của bạn.

Cái gì được giữ, cái gì mất

Cái gì được giữ, cái gì mất: khoảng trắng và thụt lề trở lại từ cây phân tích; comment và tên ngắn như a/b/fn1 vẫn mất.

Đi theo hướng ngược lại?

Nếu bạn đến đây để thu nhỏ JS cho production thay vì mở rộng, công cụ đi kèm tại https://freetoolonline.com/developer-tools/js-minifier.html thực hiện hướng tiến lên (xóa khoảng trắng, rút ngắn identifier) và hướng dẫn so sánh CSS Minifier vs Uglifier vs Tree-Shaking nói về cách ba biến đổi xếp chồng trong một pipeline build điển hình. Với tương đương phía CSS, xem CSS Unminifier vs Prettier: Khi Nào Dùng Cái Nào - quyết định phía JS tương tự: unminify khi đọc đầu ra bên thứ ba, source map khi debug build của mình.

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

Unminify có khôi phục được tên biến gốc không?

Không. Minifier thay identifier bằng tên tổng hợp ngắn ở bước build và loại bỏ bản gốc; đầu ra unminified giữ tên tổng hợp. Load source map tương ứng trong debugger trình duyệt để thấy symbol gốc.

Mã nguồn có được upload ở đâu không?

Không. Lần chạy unminify chạy hoàn toàn trong trình duyệt của bạn; văn bản minified không bao giờ được gửi đến server. Đóng tab và đầu vào biến mất.

Unminify có làm vỡ JavaScript không?

Không. Biến đổi thuần túy về mặt thẩm mỹ - khoảng trắng, ngắt dòng, và thụt lề. AST không thay đổi, nên code unminified chạy y hệt bản minified gốc. Cho chạy qua trình kiểm cú pháp nếu bạn muốn xác nhận với dây lưng.

Giới hạn kích thước file là bao nhiêu?

Bundle lên tới vài megabyte chạy được trong trình duyệt hiện đại; thời gian lần format tăng gần tuyến tính với độ dài đầu vào. Bundle rất lớn (10 MB+) có thể giật tab; trong trường hợp đó, chia bundle theo biên giới closure và unminify từng phần riêng.

Khác biệt giữa unminify và prettier là gì?

Unminify khôi phục định dạng dễ đọc cho code đã bị cố tình nén. Prettier (hoặc một formatter tương tự) áp một bộ phong cách được chọn lên code đã dễ đọc. Với bundle bên thứ ba minified, unminify trước; nếu bạn sau đó muốn đo rộng indent hoặc kiểu dấu ngoặc cụ thể, chạy prettier trên đầu ra.

Khi mục tiêu của bạn là tạo JS nhỏ hơn thay vì đọc nó, hướng dẫn how to minify css js for cloud run cold start bao quát các bước pipeline build để xóa CSS và JS trước khi triển khai container.

Tên định danh sau khi bỏ nén trông như thế nào

Bỏ nén khôi phục khoảng trắng và cấu trúc, không khôi phục tên định danh gốc. Tên biến cục bộ đã rút ngắn (chữ cái đơn như a, b, fn1) vẫn bị rút ngắn. Tên được xuất thường được giữ nguyên vì minifier bỏ qua rút ngắn ký hiệu được xuất để API module giữ nguyên. Để thu nhỏ JS, dùng JS minifier - xóa khoảng trắng, comment và rút ngắn biến cục bộ trong khi giữ nguyên tên được xuất.