Loading…

Giới thiệu Trình Thu Nhỏ HTML Trực Tuyến

Làm cho trang của bạn gọn nhẹ hơn trong vài giây ⚡. Trình Thu Nhỏ HTML của chúng tôi loại bỏ bình luận, thu gọn khoảng trắng, bỏ dấu ngoặc tùy chọn khi an toàn, và có thể tùy chọn thu nhỏ CSS/JS nội tuyến. Hoàn hảo cho bản dựng sản xuất, CI/CD, và cải thiện Core Web Vitals. 100% phía máy khách — mã của bạn không bao giờ rời khỏi trình duyệt.

Tính Năng Chính

  • Nén HTML tức thì trong trình duyệt (không cần tải lên)
  • Loại bỏ nhận xét, thu gọn khoảng trắng & ngắt dòng
  • Tối ưu hóa thuộc tính an toàn (dấu ngoặc/boolean/thẻ kết thúc tùy chọn)
  • Quy tắc bảo tồn thông minh cho <pre>, <code>, <textarea>, SVG nội tuyến
  • Tùy chọn thu nhỏ CSS/JS nội tuyến (mặc định bảo thủ)
  • Sao chép & tải xuống HTML đã thu nhỏ bằng một cú nhấp
  • Hoạt động trên máy tính & di động; tuyệt vời trong CI/CD

🛠️ Cách Thu Nhỏ HTML for html-minifier

1

Dán hoặc Tải Lên HTML Của Bạn

Thả tệp .html của bạn hoặc dán mã vào trình chỉnh sửa.

2

Chọn Tùy Chọn

Chọn mặc định bảo thủ hoặc bật thu nhỏ CSS/JS nội tuyến.

3

Thu Nhỏ & Xuất

Sao chép kết quả hoặc tải xuống .min.html để triển khai.

Thông Số Kỹ Thuật

Biến Đổi Cốt Lõi (An Toàn Theo Mặc Định)

Các thao tác được áp dụng với cài đặt bảo thủ để giữ HTML5 hợp lệ.

Thao TácÁp DụngGhi Chú
Loại bỏ nhận xét HTML <!-- ... -->✅Nhận xét giấy phép với <!--! ... --> có thể được giữ lại
Thu gọn khoảng trắng & dòng mới✅Bảo tồn ngữ nghĩa trong <pre>, <code>, <textarea>
Cắt bớt thuộc tính/dấu chấm phẩy dư thừa trong kiểu nội tuyến✅Không sắp xếp lại thuộc tính
Loại bỏ thẻ kết thúc tùy chọn (ví dụ: </li>, </p>)✅ Tùy chọnChỉ kích hoạt khi an toàn
Thuộc tính Boolean (ví dụ: disabled)✅Chuyển đổi disabled="disabled" → disabled
Loại bỏ dấu ngoặc kép không cần thiết✅Khi giá trị thuộc tính là mã thông báo an toàn
Thu nhỏ CSS/JS nội tuyến✅ Tùy chọnBảo thủ; giữ nguyên các dấu phân cách mẫu

Quy Tắc Bảo Toàn

Các phần tử/khu vực nơi khoảng trắng hoặc nội dung phải được giữ lại.

Ngữ cảnhĐược bảo toànGhi chú
<pre>, <code>, <textarea>CóKhông thu gọn khoảng trắng
<script>/<style> nội tuyếnCó thể cấu hìnhChỉ thu nhỏ nếu được kích hoạt
Đánh dấu máy chủ/mẫuCóGiữ nguyên {{ }}, <% %>, {% %}, ${{ }} v.v.
SVG/MathML nội tuyếnCóGiữ nguyên khoảng trắng cấu trúc

Mức Độ Giảm Kích Thước Điển Hình

Thay đổi tùy theo mật độ định dạng và bình luận.

Kiểu Đầu VàoTiết Kiệm Điển Hình
Được định dạng nhiều với bình luận40%–60%
Được định dạng vừa phải20%–40%
Đã thu gọn sẵn5%–15%

Tùy Chọn Dòng Lệnh

Sử dụng trong CI/CD hoặc để xử lý hàng loạt.

Node.js

html-minifier-terser (glob)

npx html-minifier-terser --collapse-whitespace --remove-comments --remove-optional-tags --minify-css true --minify-js true -o dist/index.min.html src/index.html

Bộ thu nhỏ HTML phổ biến dựa trên Node với tùy chọn CSS/JS

Linux/macOS

minify-html (Rust, rất nhanh)

minify-html --keep-whitespace=false --minify-css --minify-js src/index.html > dist/index.min.html

Cài đặt qua cargo hoặc trình quản lý gói; hiệu suất xuất sắc

Windows

PowerShell + html-minifier-terser

npx html-minifier-terser --collapse-whitespace --remove-comments -o .\dist\index.min.html .\src\index.html

Hoạt động trong PowerShell hoặc CMD

Các Trường Hợp Sử Dụng Phổ Biến

Hiệu Suất Web

  • Giảm kích thước truyền tải HTML
  • Hỗ trợ LCP/FCP bằng cách gửi ít byte hơn
  • Loại bỏ nhận xét trước khi triển khai
<!-- Xóa cái này trong sản xuất -->

Tự Động Hóa CI/CD

  • Thu nhỏ trong quá trình xây dựng (Vite/Webpack/Next.js export)
  • Nén trước với gzip/brotli sau khi thu nhỏ
  • Đóng gói trang tĩnh cho CDN

Kiểm Thử A/B & Tạo Mẫu

  • Gửi mẫu gọn nhẹ
  • Giữ nguyên chỗ dành sẵn cho SSR/ISR
  • Tránh làm hỏng các vùng nhạy cảm với khoảng trắng

❓ Frequently Asked Questions

Thu nhỏ HTML làm gì?

Nó loại bỏ các ký tự không cần thiết (nhận xét, khoảng trắng thừa, một số thẻ/dấu ngoặc tùy chọn) mà không thay đổi cách trang hiển thị. Kết quả: tệp nhỏ hơn và tải nhanh hơn.

Nó có làm hỏng <pre>, <code>, hoặc mẫu không?

Không. Những ngữ cảnh đó được giữ nguyên theo mặc định. Các dấu mẫu như {{ }}, <% %>, và {% %} không bị động đến.

Nó có thể thu nhỏ CSS và JS nội tuyến không?

Có, tùy chọn. Để an toàn, nó tắt trong chế độ bảo thủ. Bật nó khi mã nội tuyến của bạn hợp lệ và độc lập.

Tệp của tôi có thể lớn đến mức nào?

Để có trải nghiệm người dùng mượt mà trên trình duyệt, chúng tôi khuyến nghị tối đa khoảng 1 MB. Các pipeline lớn hơn nên sử dụng các công cụ CLI đã liệt kê ở trên.

HTML của tôi có được tải lên máy chủ không?

Không. Quá trình xử lý hoàn toàn ở phía máy khách trong trình duyệt của bạn để đảm bảo tốc độ và quyền riêng tư.

Pro Tips

Best Practice

Giữ mã nguồn chưa thu gọn để gỡ lỗi; chỉ tự động thu gọn trong bản dựng sản xuất.

Best Practice

Chỉ bật thu gọn CSS/JS nội tuyến khi các đoạn mã của bạn hợp lệ và không có template.

Best Practice

Nén trước với gzip/brotli trên máy chủ/CDN sau khi thu gọn để tiết kiệm tối đa.

Best Practice

Giữ lại các chú thích giấy phép với <!--! ... --> nếu được yêu cầu bởi giấy phép mã của bên thứ ba.

Additional Resources

MDN: Thu gọn mã
Documentation
Tiêu chuẩn HTML WHATWG
Documentation
Tài liệu html-minifier-terser
Documentation
Tài liệu minify-html (Rust)
Documentation

Other Tools