ย่อขนาด HTML
วาง HTML แล้วรับกลับไปโดยไม่มีช่องว่างที่ไม่มีใครเห็น ตัวนับใต้ช่องกรอกจะบอกว่าประหยัดไปได้เท่าไร
โค้ดไม่ออกจากหน้านี้ การจัดรูปแบบทำในเบราว์เซอร์ของคุณ
- ฟรี
- ไฟล์ไม่ออกจากเครื่องของคุณ
- ไม่ต้องสมัคร
- ไม่จำกัดไฟล์
วิธีใช้
- วาง HTML ลงในช่องแรก ระบบจะย่อขนาดให้ทันทีขณะพิมพ์
- ดูตัวเลขขนาดไฟล์ใต้ช่องกรอก
- คัดลอกผลลัพธ์ หรือกด «จัดรูปแบบ» เพื่อคลี่กลับเป็นแบบเดิม
สิ่งที่ควรรู้
อะไรถูกลบและอะไรไม่ถูกลบ
การขึ้นบรรทัดใหม่ระหว่างแท็ก ช่องว่างที่ต่อกันเป็นพืด และคอมเมนต์ธรรมดาจะถูกลบทิ้ง ส่วนคอมเมนต์แบบมีเงื่อนไขจะคงไว้ เพราะข้างในมีมาร์กอัปสำหรับเบราว์เซอร์รุ่นเก่า ทุกอย่างที่อยู่ใน pre, textarea, script และ style จะถูกยกไปทั้งดุ้นโดยไม่แตะต้อง เพราะการขึ้นบรรทัดใหม่ตรงนั้นคือเนื้อหา ไม่ใช่การจัดรูปแบบ
จริง ๆ แล้วคุ้มแค่ไหน
บนหน้าเว็บทั่วไป การย่อขนาดช่วยประหยัดสิบถึงยี่สิบเปอร์เซ็นต์ก่อนการบีบอัด และน้อยกว่านั้นมากหลังการบีบอัด เพราะ gzip จัดการช่องว่างที่ซ้ำกันได้ดีอยู่แล้ว จึงควรทำในขั้นตอนบิลด์ และควรลืมมันไปเลยระหว่างพัฒนา เพราะมาร์กอัปที่อ่านง่ายไม่มีต้นทุนอะไรแต่ช่วยประหยัดเวลาได้เป็นชั่วโมง
คำถามที่พบบ่อย
หน้าเว็บจะยังหน้าตาเหมือนเดิมไหม
เหมือนเดิม แต่มีข้อหนึ่ง ช่องว่างระหว่างอิลิเมนต์แบบ inline มองเห็นได้บนหน้าเว็บ ช่องว่างระหว่างแท็กจึงถูกยุบให้เหลือหนึ่งช่องแทนที่จะลบทิ้ง เลย์เอาต์จึงไม่ขยับ
โค้ดของฉันถูกส่งไปที่ไหนหรือเปล่า
ไม่ ทุกอย่างเกิดขึ้นภายในหน้านี้ เทมเพลตที่ยังไม่เผยแพร่จึงอยู่กับคุณ
มันย่อ CSS และ JavaScript ที่อยู่ข้างในด้วยไหม
ไม่ บล็อกเหล่านั้นจะถูกคัดลอกไปตามเดิม สำหรับสไตล์ชีตให้ใช้เครื่องมือย่อ CSS การไปแก้สคริปต์ด้วยเครื่องมือสำหรับมาร์กอัปคือทางลัดสู่บั๊กที่มองไม่เห็น
ย้อนกลับได้ไหม
กด «จัดรูปแบบ» แล้วมาร์กอัปจะถูกจัดวางใหม่พร้อมย่อหน้า การขึ้นบรรทัดเดิมหายไปแล้ว แต่โครงสร้างจะกลับมา
เครื่องมือที่เกี่ยวข้อง
- จัดรูปแบบ HTML วาง HTML ลงไปแล้วอ่านได้เลย แต่ละแท็กจะอยู่บนบรรทัดของตัวเองพร้อมย่อหน้าตามระดับการซ้อนที่แท้จร…
- ย่อขนาด CSS วางสไตล์ชีตลงไปแล้วรับกลับมาในรูปที่ถูกบีบแล้ว ตัวนับใต้กล่องแสดงขนาดก่อนและหลัง คุณจึงเห็นได้เ…
- ย่อขนาด JSON วาง JSON แล้วรับกลับไปโดยไม่มีไบต์ส่วนเกินแม้แต่ไบต์เดียว ไม่มีการเยื้อง ไม่มีการขึ้นบรรทัดใหม่…
- จัดรูปแบบ CSS วางสไตล์ชีตลงไป แม้จะมาเป็นบรรทัดเดียวยาว ๆ ก็กลับมาอ่านได้อีกครั้ง แต่ละดีคลาเรชันจะได้บรรทัดข…
- จัดรูปแบบ XML XML ที่โปรแกรมสร้างขึ้นมักมาเป็นบรรทัดยาวมหึมาบรรทัดเดียว วางไว้ที่นี่แล้วโครงสร้างจะปรากฏออกมา…
- จัดรูปแบบ SQL วางคำสั่งที่ได้จากไฟล์บันทึกหรือจาก ORM ซึ่งมาเป็นบรรทัดเดียวยาว แล้วอ่านมันเป็นคำสั่งอีกครั้ง…