ตัวย่อและจัดรูปแบบ CSS/JS
ย่อโค้ดสำหรับโปรดักชันหรือจัดรูปแบบเพื่อความสามารถในการอ่าน
โค้ดอินพุต
ผลลัพธ์ที่ประมวลผล
0 B
ขนาดต้นฉบับ0 B
ขนาดผลลัพธ์0%
การประหยัด0
บรรทัดที่ลบตัวอย่างการใช้งาน
การย่อ CSS
บีบอัดไฟล์ CSS โดยลบความคิดเห็น ช่องว่าง และปรับแต่งกฎสำหรับการใช้งานในโปรดักชัน
body { margin: 0; padding: 0; font-family: Arial; }...
การจัดรูปแบบ JS
แปลง JavaScript ที่ย่อแล้วเป็นโค้ดที่อ่านได้และมีการเยื้องอย่างเหมาะสมสำหรับการดีบักและพัฒนา
function UserManager(){this.users=[];this.nextId=1}...
บิลด์โปรดักชัน
เตรียมโค้ด JavaScript สำหรับโปรดักชันโดยลบความคิดเห็นและช่องว่างที่ไม่จำเป็น
const AppConfig = { apiBaseUrl: "https://api.example.com" }...
คุณสมบัติ
การย่อ CSS
ลบความคิดเห็น ช่องว่าง และปรับแต่งกฎ CSS
การย่อ JS
บีบอัด JavaScript โดยรักษาลิเทอรัลสตริง
การจัดรูปแบบโค้ด
จัดรูปแบบโค้ดที่ย่อแล้วด้วยการเยื้องที่เหมาะสม
การวิเคราะห์ขนาด
เปรียบเทียบขนาดต้นฉบับและผลลัพธ์พร้อมเปอร์เซ็นต์การประหยัด
วิธีใช้งาน
1
เลือกโหมด
เลือกโหมด CSS หรือ JavaScript ตามประเภทโค้ดของคุณ
2
ป้อนโค้ด
วางโค้ดของคุณในพื้นที่อินพุตหรืออัปโหลดไฟล์
3
ประมวลผล
คลิกย่อเพื่อบีบอัดหรือจัดรูปแบบเพื่อฟอร์แมตโค้ด
4
ใช้ผลลัพธ์
คัดลอกโค้ดที่ประมวลผลหรือดาวน์โหลดเป็นไฟล์
คำถามที่พบบ่อย
Minification คือการเอาทุกอย่างใน CSS หรือ JavaScript ที่ไม่จำเป็นสำหรับการรันโค้ดออก: คำอธิบาย (// และ /* */ ใน JS, /* */ ใน CSS), ช่องว่างและย่อหน้าที่ไม่จำเป็น, ตัวอักษรขึ้นบรรทัดใหม่ระหว่างคำสั่ง, เครื่องหมาย semicolon ที่เกินความจำเป็น (ในบางบริบทของ JS) และในบางกรณีจะมีการย่อชื่อตัวแปร (สำหรับเครื่องมือ minifiers ขั้นสูง) โค้ดที่ได้จะทำงานเหมือนเดิมทุกประการ — เบราว์เซอร์จะประมวลผลและรันด้วยวิธีเดียวกัน — แต่ใช้จำนวนไบต์น้อยกว่า การประหยัดโดยทั่วไป: CSS 20-50%, JavaScript 30-70% ขึ้นอยู่กับจำนวนคำอธิบายและระยะย่อหน้าที่โค้ดต้นฉบับมี
Beautification คือกระบวนการย้อนกลับ: มันจะนำโค้ดที่ถูกบีบอัดหรือ minified มาจัดรูปแบบใหม่ด้วยระยะย่อหน้าที่สม่ำเสมอ, การขึ้นบรรทัดใหม่ระหว่างคำประกาศ และการเว้นวรรคที่เหมาะสม คุณจำเป็นต้องใช้เมื่อต้องการดีบั๊กไลบรารีของบุคคลภายนอกที่ถูก minified (คัดลอกโค้ดที่ถูกย่อมา, ทำการ beautify, แล้วจึงอ่านมัน), เมื่อทำงานกับ CSS/JS ที่สร้างขึ้นหรือเชื่อมต่อกันซึ่งไม่มีการจัดรูปแบบ, เมื่อตรวจสอบโค้ดเก่าที่ไม่เคยได้รับการจัดรูปแบบอย่างถูกต้อง หรือเมื่อการตรวจทานโค้ดต้องการส่วนต่าง (diffs) ที่อ่านง่าย มันจะไม่เพิ่มคำอธิบายหรือกู้คืนชื่อตัวแปรเดิม — มีเพียงการจัดรูปแบบเท่านั้นที่ถูกสร้างขึ้นใหม่
เครื่องมือย่อของเครื่องมือนี้มีความระมัดระวังสูง — มันลบเฉพาะช่องว่างและคำอธิบาย ซึ่งไม่มีความหมายในเชิงโครงสร้างใดๆ โดย String literals (single-quoted, double-quoted และ template literals ใน JS), regular expressions, CSS selector และค่า property จะถูกเก็บรักษาไว้ครบถ้วน จุดที่ต้องระวังทั่วไป: หาก JavaScript ของคุณขึ้นอยู่กับการใส่เครื่องหมาย semicolon อัตโนมัติ (ASI) และโค้ดถูกจัดโครงสร้างอย่างคลุมเครือ การ minification ที่นำหลายคำสั่งมาไว้ในบรรทัดเดียวกันอาจทำให้เกิดปัญหาทางทฤษฎีได้ วิธีที่ปลอดภัยที่สุดคือการใช้เครื่องหมาย semicolons อย่างชัดเจนเสมอ และทดสอบผลลัพธ์ที่ผ่านการ minified ในเบราว์เซอร์เป้าหมายของคุณ
สำหรับโปรเจกต์สำหรับการใช้งานจริงที่มีขั้นตอนการพัฒนา (development workflow): ให้ใช้เครื่องมือ build (Webpack, Vite, Rollup, esbuild หรือ Parcel) ที่รวมการ minification เข้ากับ pipeline การ build ของคุณ เครื่องมือเหล่านี้มีการปรับแต่งที่ซับซ้อนกว่า: tree-shaking, module bundling, code splitting, source maps และ post-processing เครื่องมือออนไลน์นี้เหมาะที่สุดสำหรับ: การย่อไฟล์เก่าแบบครั้งเดียวโดยไม่มีระบบ build, การตรวจสอบขนาดที่ถูกย่ออย่างรวดเร็วก่อนที่จะยืนยันการเปลี่ยนแปลงใน build pipeline, การอ่านโค้ดที่ถูก minified ของคนอื่นโดยการทำให้สวยงามขึ้น หรือโปรเจกต์เล็กๆ ที่การตั้งค่าระบบ build จะเกินความจำเป็น
อัปโหลดไฟล์ .css หรือ .js ขนาดสูงสุด 5MB ต่อไฟล์ เครื่องมือจะตรวจจับโหมดอัตโนมัติตามนามสกุลไฟล์ สำหรับการป้อนข้อความ (paste mode) จะไม่มีการจำกัดขนาด แต่ไฟล์ที่ใหญ่มากอาจใช้เวลาในการประมวลผล ผลลัพธ์สามารถดาวน์โหลดเป็นไฟล์ .css หรือ .js ได้ ไฟล์ SCSS, TypeScript และรูปแบบการประมวลผลก่อนอื่นอื่นๆ ต้องถูกคอมไพล์เป็น CSS หรือ JavaScript ปกติก่อนการ minification
Minification ลดขนาดไฟล์โดยการเอาตัวอักษรที่ซ้ำซ้อนออก การบีบอัด Gzip (ซึ่งใช้โดยเว็บเซิร์ฟเวอร์สำหรับการส่งข้อมูล) จะทำการบีบอัดไฟล์ที่ถูกย่อแล้วต่อไปอีก ประเด็นสำคัญคือ: โค้ดที่ถูก minified จะบีบอัดได้ดีกว่าโค้ดต้นฉบับเพราะมีความหลากหลายของตัวอักษรน้อยกว่า การรวมกันของ minification + Gzip มักจะบรรลุการลดขนาดโดยรวม 60-85% ตัวอย่างเช่น การส่งไฟล์ CSS ขนาด 100KB: ต้นฉบับ + Gzip ≈ 25KB, ย่อแล้ว + Gzip ≈ 15KB การย่อช่วยประหยัดไป 10KB หลังจากผ่าน Gzip แล้ว หากไม่ได้ตั้งค่า Gzip บนเซิร์ฟเวอร์ของคุณ การย่อจะช่วยประหยัดได้มากกว่าในเชิงจำนวนตัวเลขสัมบูรณ์ แต่ผลประโยชน์ในเชิงเปรียบเทียบจะน้อยกว่า
ไม่เลย การย่อและการปรับแต่งทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณโดยใช้ JavaScript โค้ด CSS และ JavaScript ของคุณ ซึ่งอาจประกอบด้วยตรรกะที่เป็นกรรมสิทธิ์เฉพาะ, จุดเชื่อมต่อ API หรือการกำหนดค่าที่ละเอียดอ่อน จะไม่มีทางหลุดออกจากอุปกรณ์ของคุณ
ไม่ได้โดยตรง — เครื่องมือจะประมวลผล CSS และ JavaScript แยกกันเนื่องจากพวกมันมีกฎไวยากรณ์ที่แตกต่างกัน หากคุณมีไฟล์ HTML ที่มีบล็อก <style> และ <script> ฝังอยู่ คุณจะต้องแยกแต่ละส่วน ย่อแยกกัน แล้วจึงใส่กลับเข้าไป สำหรับการย่อ HTML+CSS+JS แบบเต็มในขั้นตอนเดียว ให้ใช้เครื่องมือย่อ HTML ที่รองรับบล็อกโค้ดฝังตัว หรือใช้เครื่องมือ build ที่ประมวลผลประเภทสินทรัพย์ทั้งหมดพร้อมกัน
ตัวย่อและจัดรูปแบบ CSS/JS คืออะไร?
คะแนน PageSpeed กำลังร่วงเพราะ CSS และ JS ที่ไม่ได้ย่อ? วางโค้ด กดย่อ แล้วได้เวอร์ชันพร้อมใช้งานที่ตัดส่วนเกินทั้งหมดออก หรือกลับกัน - จัดรูปแบบโค้ดที่ย่อแล้วเมื่อต้องดีบักความยุ่งเหยิงที่ถูกบีบอัดของคนอื่น
ประโยชน์ของการใช้ตัวย่อ CSS/JS
คุณสามารถลดขนาดไฟล์ CSS และ JS ได้ 30-80% ซึ่งสร้างความแตกต่างจริงๆ ในเวลาโหลดหน้าเว็บ ตัวจัดรูปแบบช่วยชีวิตเมื่อคุณพยายามเข้าใจโค้ดบุคคลที่สามที่ถูกย่อ ทุกอย่างประมวลผลในเบราว์เซอร์ - ไม่มีโค้ดถูกอัปโหลดไปไหน
เครื่องมือนี้มีประโยชน์หรือไม่?