วิธีจัดรูปแบบและบีบอัดโค้ด HTML

การจัดรูปแบบและการบีบอัด HTML เป็นการดำเนินการที่ตรงข้ามกันสองอย่างที่มีจุดประสงค์ที่แตกต่างกัน การจัดรูปแบบทำให้โค้ดอ่านได้สำหรับนักพัฒนา การบีบอัดทำให้เบาสำหรับเบราว์เซอร์ โครงการส่วนใหญ่ต้องการทั้งสอง — โค้ดที่จัดรูปแบบในการพัฒนา โค้ดที่บีบอัดในการผลิต

การจัดรูปแบบ: ทำให้ HTML อ่านได้

ตัวจัดรูปแบบใช้ HTML ที่บีบอัดหรือยุ่งและเพิ่มการเยื้องที่ดี การขึ้นบรรทัดใหม่ และการเว้นวรรคที่สม่ำเสมอ โครงสร้างจะมองเห็นได้ในแวบเดียว

ก่อน:

<div class="card"><h2>หัวข้อ</h2><p>ข้อความบางส่วนที่นี่</p><a href="/link">อ่านเพิ่มเติม</a></div>

หลัง:

<div class="card">
  <h2>หัวข้อ</h2>
  <p>ข้อความบางส่วนที่นี่</p>
  <a href="/link">อ่านเพิ่มเติม</a>
</div>

วิธีจัดรูปแบบ HTML

1. วาง HTML ของคุณ — ป้อนโค้ดที่ยุ่งหรือบีบอัดในตัวจัดรูปแบบ
2. ตั้งค่าความต้องการของคุณ — เลือกขนาดการเยื้อง (2 หรือ 4 ช่องว่าง) และว่าคุณต้องการเก็บแท็กในบรรทัดหรือไม่
3. คัดลอกผลลัพธ์ — HTML ที่จัดรูปแบบพร้อมสำหรับตัวแก้ไขของคุณ

การบีบอัด: ทำให้ HTML เบา

ตัวบีบอัดลบทุกอย่างที่เบราว์เซอร์ไม่ต้องการ — ช่องว่าง ความคิดเห็น แท็กปิดที่ไม่บังคับ และค่าแอตทริบิวต์ที่ซ้ำซ้อน ผลลัพธ์คือสตริงเดียวที่กะทัดรัด

วิธีบีบอัด HTML

1. วาง HTML ที่จัดรูปแบบของคุณ — ป้อนโค้ดที่มีการเยื้อง ความคิดเห็น และช่องว่าง
2. กำหนดตัวเลือก — เลือกที่จะลบความคิดเห็น ลดช่องว่าง และเพิ่มประสิทธิภาพแอตทริบิวต์
3. คัดลอกเอาต์พุตที่บีบอัด — ใช้ในบิลด์การผลิตของคุณ

เมื่อใดควรใช้อะไร

เคล็ดลับ

• อัตโนมัติในกระบวนการบิลด์ของคุณ — เครื่องมือส่วนใหญ่ (Webpack, Vite, Gulp) สามารถบีบอัด HTML โดยอัตโนมัติเมื่อปรับใช้ เขียนโค้ดที่จัดรูปแบบ ส่งโค้ดที่บีบอัด
• จัดรูปแบบก่อน commit — HTML ที่สะอาดและสม่ำเสมอทำให้ Git diffs อ่านได้ง่ายขึ้นและการตรวจสอบโค้ดเร็วขึ้น
• การบีบอัดจะไม่ทำลาย HTML ของคุณ — มันลบเฉพาะสิ่งที่ไม่มีผลต่อการเรนเดอร์ ความคิดเห็น ช่องว่างเกิน และแท็กที่ไม่บังคับสามารถลบได้อย่างปลอดภัย
• ใช้การไฮไลต์ไวยากรณ์ — ทั้งตัวจัดรูปแบบและตัวบีบอัดเสนอการไฮไลต์ที่ช่วยตรวจสอบว่าเอาต์พุตถูกต้อง