Rút gọn / Làm đẹp

Rút gọn hoặc làm đẹp mã. Mọi thứ ở lại trong trình duyệt.

Cách Rút gọn / Làm đẹp hoạt động

Công cụ thu nhỏ/làm đẹp nén HTML, CSS và JavaScript bằng cách xóa chú thích, khoảng trắng không cần thiết và các ký tự thừa, hoặc mở rộng code đã thu nhỏ trở lại dạng thụt lề có thể đọc. Tất cả quá trình xử lý diễn ra trong trình duyệt bằng các bộ phân tích được đóng gói; không có gì bạn dán được truyền đi đâu. Không có gì bạn gõ ở đây rời thiết bị của bạn.

Việc thu nhỏ trực tiếp ảnh hưởng đến hiệu suất tải trang: các file nhỏ hơn truyền nhanh hơn, phân tích nhanh hơn và tiêu thụ ít băng thông hơn. Đối với các triển khai sản xuất, tài sản đã thu nhỏ là tiêu chuẩn. Công cụ này hữu ích khi bạn nhận file đã thu nhỏ cần đọc (làm đẹp), khi bạn muốn kiểm tra bộ thu nhỏ làm gì với đoạn code trước khi tích hợp vào pipeline xây dựng, hoặc khi bạn cần thu nhỏ một lần nhanh mà không cần thiết lập công cụ xây dựng.

Tác giả: Bastien Sulyan

Cách sử dụng Rút gọn / Làm đẹp, từng bước

Dán code HTML, CSS hoặc JavaScript của bạn vào khu vực nhập.
Chọn loại ngôn ngữ từ menu thả xuống (HTML, CSS hoặc JavaScript).
Nhấp 'Thu nhỏ' để tạo phiên bản nén, hoặc 'Làm đẹp' để mở rộng và thụt lề code.
Sao chép kết quả từ khu vực đầu ra bằng nút sao chép.
Dán code khác và lặp lại khi cần.

Trường hợp sử dụng thường gặp

Lập trình viên front-end muốn thu nhỏ đoạn CSS quan trọng để nội tuyến trong head HTML để cải thiện hiệu suất above-the-fold.
Lập trình viên nhận script bên thứ ba đã thu nhỏ và cần làm đẹp nó để hiểu logic trong quá trình đánh giá bảo mật.
Người viết tài liệu kỹ thuật cần phiên bản đã làm đẹp của thẻ script JSON-LD đã thu nhỏ để đưa vào tài liệu.
Lập trình viên web kiểm tra mức tiết kiệm byte từ việc thu nhỏ file CSS trước khi quyết định có thêm bước xây dựng hay không.

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

Code tôi dán có được gửi đến máy chủ nào để thu nhỏ không?

Không. Việc thu nhỏ và làm đẹp được thực hiện bởi chính mã của trang, viết riêng cho công cụ này chứ không lấy từ một bộ thu nhỏ bên thứ ba. Tất cả quá trình xử lý ở trong tab trình duyệt. Không có gì bạn dán ở đây được truyền đến Sunasty hay bất kỳ bên thứ ba nào.

Việc thu nhỏ JavaScript có bảo toàn hành vi gốc của code không?

Bộ thu nhỏ tốt bảo toàn hành vi bằng cách chỉ xóa khoảng trắng, rút ngắn tên biến trong phạm vi được kiểm soát và loại bỏ chú thích. Công cụ này nhắm vào các biến đổi an toàn. Các tối ưu hóa tích cực như loại bỏ code chết hoặc inlining hàm thường không được áp dụng, vì những điều đó yêu cầu phân tích toàn bộ chương trình.

Tôi có thể thu nhỏ rồi làm đẹp kết quả để xác minh không?

Có. Thu nhỏ code trước, rồi dán đầu ra đã thu nhỏ trở lại vào nhập và nhấp Làm đẹp. Phiên bản đã làm đẹp sẽ trông khác với nguồn gốc (tên biến có thể được rút ngắn, chú thích bị xóa) nhưng sẽ tương đương về mặt cấu trúc.

Thu nhỏ HTML có xóa tất cả chú thích không?

Công cụ loại bỏ các chú thích HTML tiêu chuẩn () trong quá trình thu nhỏ. Các chú thích có điều kiện được dùng bởi IE cũ () luôn được giữ lại, vì vậy việc loại bỏ chú thích không thể phá vỡ hành vi cũ phụ thuộc vào chúng.

Có giới hạn kích thước code tôi có thể thu nhỏ không?

Giới hạn là bộ nhớ có sẵn của tab trình duyệt. Code đến vài trăm kilobyte xử lý nhanh. Với các gói JavaScript lớn (megabyte), công cụ xây dựng chuyên dụng như esbuild, Terser hoặc Lightning CSS nhanh hơn và phù hợp hơn cho sản xuất.

Công cụ liên quan

Giữ mọi thứ cục bộ, khám phá các công cụ bổ trợ.

Tất cả công cụ lập trình