ย่อโค้ด JavaScript และ CSS

ทำอะไรได้

การย่อโค้ด (minification) ลบทุกอย่างที่เบราว์เซอร์ไม่จำเป็นต้องใช้ในการรันโค้ด ได้แก่ ช่องว่าง การขึ้นบรรทัดใหม่ คอมเมนต์ และชื่อยาว ๆ ไฟล์ที่เล็กลงดาวน์โหลดได้เร็วขึ้น ช่วยปรับปรุงเวลาโหลดหน้าเว็บและ Core Web Vitals โดยเฉพาะบนเครือข่ายมือถือ

เครื่องมือนี้ย่อ JavaScript ด้วย Terser ซึ่งเป็นตัวย่อที่ webpack, Rollup และ Vite ใช้ และย่อ CSS ด้วย CSSO ซึ่งยังปรับโครงสร้างสไตล์ชีตด้วย: ย่อสี (#ffffff เป็น #fff) ลบหน่วยและค่าที่ซ้ำซ้อน (0px 0px เป็น 0) และรวมกฎที่ใช้ selector หรือ declaration ร่วมกัน

วิธีใช้งาน

1. วางโค้ดลงในช่อง อินพุต ลากไฟล์ .js หรือ .css มาวาง หรือคลิก ตัวอย่าง
2. เลือก JavaScript หรือ CSS
3. สำหรับ JavaScript ย่อชื่อตัวแปร จะเปลี่ยนชื่อตัวแปรภายในและพารามิเตอร์เป็นตัวอักษรเดียว ชื่อที่ export และชื่อ global จะไม่ถูกเปลี่ยนเลย
4. สำหรับ CSS รวมกฎที่ซ้ำกัน จะรวมกฎที่มี declaration เดียวกัน
5. คัดลอกผลลัพธ์หรือดาวน์โหลด ตัวนับขนาดใต้แต่ละช่องจะแสดงว่าคุณประหยัดได้เท่าไร

หาก JavaScript มี syntax error ข้อความแสดงข้อผิดพลาดจะบอกบรรทัดและคอลัมน์ ให้คุณกระโดดไปที่จุดนั้นได้

ตัวอย่าง

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

จะกลายเป็น

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

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

ใช้สำหรับงานเร็ว ๆ ครั้งเดียว: โค้ดสำหรับ CDN, inline script ในอีเมล HTML, bookmarklet หรือเพื่อดูว่าไลบรารีจะเล็กได้แค่ไหน ในโปรเจกต์จริง bundler ของคุณควรย่อโค้ดในทุกการ build เพื่อให้ซอร์สโค้ดยังอ่านง่าย