ตัวจัดรูปแบบและบีบอัด JavaScript
จัดระเบียบ JavaScript หรือบีบอัดด้วยการย่อโค้ดและย่อชื่อตัวแปรจริง
เกี่ยวกับเครื่องมือนี้
จัดระเบียบ JavaScript ด้วยการย่อหน้าและการเว้นวรรคที่สม่ำเสมอ — กางบันเดิลของไลบรารีออกเพื่อดูว่ามันทำอะไรกันแน่ หรือทำความสะอาดโค้ดที่วางมาจากคอนโซล ส่วนตัวบีบอัดคือของจริง: Terser แยกวิเคราะห์โค้ดของคุณเป็น AST ตัดโค้ดที่ไม่มีวันทำงาน ย่อชื่อตัวแปรภายใน และตัดคอมเมนต์ออก — เป็นเอนจินเดียวกับที่บันเดิลเลอร์ใช้ในระบบจริง
เพราะการบีบอัดทำบน AST มันจึงไม่มีวันทำโค้ดที่ทำงานได้อยู่แล้วพัง แบบที่ “ตัวบีบอัด” ซึ่งอาศัย regex อาจทำ: สตริง เทมเพลตลิเทอรัล นิพจน์ปรกติ และกรณีขอบของ ASI ถูกจัดการโดยตัวแยกวิเคราะห์จริง ๆ ข้อผิดพลาดทางไวยากรณ์จะถูกรายงานพร้อมตำแหน่ง แทนที่จะผลิตผลลัพธ์ที่เสียหายออกมา
Terser จะถูกโหลดก็ต่อเมื่อคุณกดบีบอัดครั้งแรก หน้าเว็บจึงเบา และมันทำงานในเบราว์เซอร์ของคุณทั้งหมด — ซอร์สโค้ดที่เป็นทรัพย์สินของคุณไม่เคยออกจากเครื่อง
คำถามที่พบบ่อย
- โค้ดของฉันจะเล็กลงแค่ไหน?
- โค้ดที่เขียนด้วยมือมักลดลง 30–60% ก่อน gzip: ช่องว่าง คอมเมนต์ และชื่อตัวแปรภายในยาว ๆ มีน้ำหนักมากขนาดนั้น ส่วนโค้ดที่ผ่านการบันเดิลมาแล้วจะเล็กลงน้อยกว่ามาก — เพราะมันผ่านการแปลงแบบเดียวกันมาแล้วหนึ่งรอบ
- การบีบอัดเปลี่ยนพฤติกรรมไหม?
- การบีบและการย่อชื่อรักษาความหมายไว้: เปลี่ยนชื่อเฉพาะตัวแปรภายใน และการตัดโค้ดที่ไม่มีวันทำงานจะลบเฉพาะสาขาที่พิสูจน์ได้ว่ารันไม่ได้ ข้อยกเว้นคลาสสิกคือโค้ดที่พึ่งพา Function.prototype.name หรือ toString() ของฟังก์ชันตัวเอง
- ใช้กางโค้ดที่บีบอัดจากเว็บไซต์จริงได้ไหม?
- ตัวจัดรูปแบบคืนช่องว่างและโครงสร้างกลับมา ทำให้อ่านการไหลของการควบคุมได้ — แต่ชื่อตัวแปรเดิมและคอมเมนต์หายไปตลอดกาล คุณจะเห็นแค่ a, b, c สำหรับการดีบักอย่างจริงจัง ให้ใช้ source map หากเว็บนั้นส่งมาด้วย
- รองรับ TypeScript หรือ JSX ไหม?
- ไม่ — ทั้งสองต้องการตัวแยกวิเคราะห์ของตัวเอง ให้คอมไพล์เป็น JavaScript ก่อน (tsc, esbuild) แล้วค่อยนำผลลัพธ์มาจัดรูปแบบหรือบีบอัดที่นี่