ไม่มีการอัปโหลด, 100% ในเครื่อง, ไม่มีบัญชี

ย่อ / จัดรูปแบบโค้ด

Minify หรือ Beautify โค้ด ทุกอย่างอยู่ในเบราว์เซอร์

ย่อ / จัดรูปแบบโค้ด ทำงานอย่างไร

Minify / Beautify บีบอัด HTML, CSS และ JavaScript โดยการลบ comments, whitespace ที่ไม่จำเป็น และอักขระที่ซ้ำซ้อน หรือขยาย code ที่ minify แล้วกลับเป็นรูปแบบที่มีการย่อหน้าที่อ่านได้ การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์โดยใช้ parsers ที่ bundle ไม่มีสิ่งใดที่คุณวางถูกส่งที่ใด ไม่มีสิ่งใดที่คุณพิมพ์ที่นี่ออกจากอุปกรณ์ของคุณ

การ minification มีผลต่อประสิทธิภาพการโหลดหน้าโดยตรง: ไฟล์ขนาดเล็กกว่าถ่ายโอนได้เร็วกว่า parse ได้เร็วกว่า และใช้ bandwidth น้อยกว่า สำหรับ production deployments, assets ที่ minify แล้วเป็นมาตรฐาน เครื่องมือนี้มีประโยชน์เมื่อคุณได้รับไฟล์ที่ minify แล้วซึ่งต้องการอ่าน (beautify) เมื่อต้องการตรวจสอบสิ่งที่ minifier ทำกับ snippet ก่อนรวมเข้า build pipeline หรือเมื่อต้องการ minification ครั้งเดียวโดยไม่ตั้งค่า build tool

เขียนโดย Bastien Sulyan

วิธีใช้ ย่อ / จัดรูปแบบโค้ด ทีละขั้นตอน

  1. วาง HTML, CSS หรือ JavaScript code ลงในพื้นที่อินพุต
  2. เลือกประเภทภาษาจาก dropdown (HTML, CSS หรือ JavaScript)
  3. คลิก Minify เพื่อสร้างเวอร์ชันที่บีบอัด หรือ Beautify เพื่อขยายและย่อหน้า code
  4. คัดลอกผลลัพธ์จากพื้นที่เอาต์พุตโดยใช้ปุ่มคัดลอก
  5. วาง code ที่แตกต่างกันและทำซ้ำตามต้องการ

กรณีการใช้งานที่พบบ่อย

  • นักพัฒนา frontend ต้องการ minify CSS snippet ที่สำคัญเพื่อ inline ใน HTML head สำหรับประสิทธิภาพ above-the-fold
  • นักพัฒนาได้รับ script ของบุคคลที่สามที่ minify แล้วและต้องการ beautify เพื่อเข้าใจ logic ระหว่างการตรวจสอบความปลอดภัย
  • นักเขียนเทคนิคต้องการเวอร์ชันที่ prettify แล้วของ minified JSON-LD script tag เพื่อรวมในเอกสาร
  • นักพัฒนาเว็บตรวจสอบการประหยัดไบต์จากการ minify ไฟล์ CSS ก่อนตัดสินใจว่าจะเพิ่ม build step หรือไม่

คำถามที่พบบ่อย

code ที่ฉันวางถูกส่งไปยังเซิร์ฟเวอร์เพื่อ minification หรือไม่?

ไม่ การ minification และ beautification ทำงานโดยโค้ดของหน้านี้เอง ซึ่งเขียนขึ้นสำหรับเครื่องมือนี้โดยเฉพาะ ไม่ได้ดึงมาจาก minifier ของบุคคลที่สาม การประมวลผลทั้งหมดอยู่ในแท็บเบราว์เซอร์ ไม่มีสิ่งใดที่คุณวางที่นี่ถูกส่งไปยัง Sunasty หรือบุคคลที่สาม

JavaScript minification รักษา behavior ดั้งเดิมของ code หรือไม่?

minifier ที่ดีรักษา behavior โดยเพียงลบ whitespace ย่อชื่อตัวแปรภายใน controlled scope และลบ comments เครื่องมือนี้กำหนดเป้าหมายการแปลงที่ปลอดภัย การ optimize เชิงรุกเช่น dead-code elimination หรือ function inlining โดยทั่วไปไม่ถูกใช้เนื่องจากต้องการการวิเคราะห์โปรแกรมเต็มรูปแบบ

ฉันสามารถ minify จากนั้น beautify ผลลัพธ์เพื่อตรวจสอบได้หรือไม่?

ได้ Minify code ก่อน จากนั้นวางเอาต์พุตที่ minify แล้วกลับเข้าอินพุตและคลิก Beautify เวอร์ชัน beautified จะมีลักษณะต่างจาก source ดั้งเดิม (ชื่อตัวแปรอาจถูกย่อ comments ถูกลบ) แต่จะเทียบเท่าทางโครงสร้าง

HTML minification ลบ comments ทั้งหมดหรือไม่?

เครื่องมือลบ HTML comments มาตรฐาน (<!-- ... -->) ระหว่าง minification Conditional comments ที่ใช้โดย IE เวอร์ชันเก่า (<!--[if IE]...-->) จะถูกเก็บไว้เสมอ ดังนั้นการลบ comments จึงไม่ทำให้ legacy behavior ที่พึ่งพา comments เหล่านี้เสียหาย

มีขีดจำกัดขนาดสำหรับ code ที่ฉันสามารถ minify ได้หรือไม่?

ขีดจำกัดคือหน่วยความจำที่มีของแท็บเบราว์เซอร์ Code ที่มีขนาดถึงหลายร้อยกิโลไบต์ประมวลผลได้อย่างรวดเร็ว สำหรับ JavaScript bundles ขนาดใหญ่ (เมกะไบต์) build tool เฉพาะเช่น esbuild, Terser หรือ Lightning CSS เร็วกว่าและเหมาะสมกว่าสำหรับ production

เครื่องมือที่เกี่ยวข้อง

เก็บทุกอย่างไว้ในเครื่อง, สำรวจเครื่องมือเสริม

เครื่องมือนักพัฒนาทั้งหมด