พัฒนาเว็บ

JS Minify / Beautify

บีบอัด JavaScript สำหรับ production หรือจัดรูปแบบโค้ดที่บีบอัดแล้วให้อ่านง่าย


                        
                    

Minifying JavaScript strips whitespace, comments, and line breaks, and often shortens local variable names — none of that changes how the code runs, but it noticeably shrinks the file for a faster load.

How to use it

Common uses

Things to keep in mind

Minification isn't obfuscation — variables get renamed to shrink size, not to hide logic; serious obfuscation needs dedicated specialized tools.

Minified code in production without a source map is hard to debug — the line numbers in error messages won't match the original file.

บทความเกี่ยวกับเครื่องมือนี้: การมินิฟาย JavaScript: ความแตกต่างระหว่างการมินิฟายกับการอ๊อบฟัสเคต

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

ตัวย่อขนาดใช้เครื่องมืออะไรอยู่เบื้องหลัง?

ใช้ terser ซึ่งเป็นตัวย่อขนาดและบีบอัด JavaScript ที่ใช้กันอย่างแพร่หลายและเข้าใจไวยากรณ์สมัยใหม่ด้วย

ทำไม JavaScript ที่ย่อขนาดแล้วถึงดีบักยากกว่า?

Terser ย่อชื่อตัวแปรและฟังก์ชัน และลบช่องว่างกับคอมเมนต์ออก และเนื่องจากเครื่องมือนี้ไม่สร้าง source map เครื่องมือนักพัฒนาของเบราว์เซอร์จึงไม่สามารถแมปโค้ดที่ย่อแล้วกลับไปยังบรรทัดต้นฉบับที่อ่านง่ายได้

การย่อขนาดจะทำให้โค้ดของฉันพังหรือไม่?

สำหรับ JavaScript ที่ถูกต้องตามไวยากรณ์ การย่อขนาดจะรักษาพฤติกรรมไว้ หากมีข้อผิดพลาดทางไวยากรณ์ เครื่องมือจะรายงานบรรทัดและคอลัมน์เพื่อให้คุณแก้ไขก่อนย่อขนาด — ทุกอย่างทำงานในเครื่องโดยไม่อัปโหลดโค้ดของคุณ

Tree shaking ต่างจากการมินิฟายอย่างไร?

Tree shaking ลบโค้ดที่ไม่ได้ถูกใช้งานที่ไหนเลยออกจากบันเดิล โดยวิเคราะห์กราฟความสัมพันธ์ของโมดูลระหว่างการบิลด์ ในขณะที่การมินิฟายเพียงย่อรูปแบบข้อความของโค้ดที่มีอยู่แล้วเท่านั้น มันไม่ลบฟังก์ชันใด ๆ ที่ถูกเรียกใช้งานจริง

ปลอดภัยหรือไม่ที่จะใช้ JavaScript ที่มินิฟายแล้วใน production โดยไม่ทดสอบเพิ่มเติม?

ปลอดภัย การมินิฟายเป็นการแปลงเชิงไวยากรณ์ล้วน ๆ ที่รักษาพฤติกรรมของโปรแกรมให้เหมือนเดิมทุกประการ ความแตกต่างของพฤติกรรมใด ๆ หลังการมินิฟายบ่งชี้ถึงบั๊กในตัวมินิฟายเอง ไม่ใช่การเปลี่ยนแปลงตรรกะโดยตั้งใจ

บทความ: พัฒนาเว็บ

HEX, RGB, HSL: ทำไมสีจึงมีวิธีเขียนหลายแบบ

เหตุใดนักออกแบบจึงมักเลือกใช้ HSL แทน HEX เมื่อต้องเลือกโทนสีด้วยตนเอง

การมินิฟาย CSS: อะไรถูกลบออกจากไฟล์บ้างและเพื่ออะไร

เหตุใด CSS ที่ถูกมินิฟายแล้วยังคงทำงานในเบราว์เซอร์ได้เหมือนเดิม แม้จะอ่านยากขึ้นสำหรับมนุษย์

การมินิฟาย HTML: เหตุใดช่องว่างในมาร์กอัปจึงมีความสำคัญ

เหตุใดการลบช่องว่างใน <pre> หรือ textarea อาจทำให้หน้าเว็บแสดงผลผิดพลาด ต่างจากส่วนอื่น ๆ

CSS Gradient: linear ต่างจาก radial และ conic อย่างไร

เหตุใด conic-gradient จึงเหมาะกับแผนภูมิวงกลม ส่วน radial เหมาะกับเอฟเฟกต์แสงจุด

อัลกอริทึม Luhn: ตรวจสอบความถูกต้องของหมายเลขบัตรอย่างไร

เหตุใดหมายเลขบัตรที่ผ่านการตรวจสอบด้วยอัลกอริทึม Luhn จึงไม่ได้หมายความว่าบัตรนั้นมีอยู่จริง

IBAN: หมายเลขบัญชีธนาคารระหว่างประเทศมีโครงสร้างอย่างไร

เหตุใดตัวอักษรสองตัวแรกใน IBAN จึงเป็นรหัสประเทศ ไม่ใช่ส่วนหนึ่งของหมายเลขบัญชี

QR Code: ลิงก์ถูกบรรจุลงในตารางพิกเซลได้อย่างไร

เหตุใด QR Code ที่มีโลโก้อยู่ตรงกลางจึงยังสแกนได้ แม้ภาพบางส่วนจะถูกบัง

บาร์โค้ด: Code 128 ต่างจาก EAN-13 อย่างไร

เหตุใดสินค้าในร้านค้าส่วนใหญ่จึงใช้ EAN-13 แทนที่จะเป็น Code 128

ภาพ Placeholder: เหตุใดจึงต้องใช้ภาพตัวแทนในการพัฒนา

เหตุใดนักพัฒนาเว็บจึงจงใจใส่กล่องสีเทาแทนภาพถ่ายจริงในขั้นตอนการพัฒนา