การลดขนาดทำให้วิธีการทำงานของโค้ดของฉันเปลี่ยนไปหรือไม่

ไม่ การลดขนาดจะลบช่องว่างและความคิดเห็น ซึ่งไม่ส่งผลต่อการดำเนินการ การทำให้ตัวแปรสั้นลง (mangling) จะเปลี่ยนชื่อตัวแปรในเครื่อง แต่ยังคงลักษณะการทำงานไว้ ตัวแปรร่วมและชื่อที่ส่งออกจะถูกเก็บไว้เหมือนเดิม

ฉันควรย่อขนาดในการพัฒนาหรือการผลิตหรือไม่?

ใช้โค้ดย่อขนาดในการผลิตเท่านั้น ในระหว่างการพัฒนา ให้เก็บโค้ดต้นฉบับที่อ่านได้ไว้ เครื่องมือสร้างส่วนใหญ่ (Webpack, Vite, esbuild) จัดการการลดขนาดโดยอัตโนมัติโดยเป็นส่วนหนึ่งของกระบวนการสร้างที่ใช้งานจริง

ความแตกต่างระหว่างการลดขนาดและการทำให้สับสนคืออะไร?

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

ฉันควรคาดหวังการลดขนาดเท่าใด

โดยทั่วไป 30-60% ก่อน gzip โค้ดที่มีการแสดงความคิดเห็นที่ดีซึ่งมีชื่อตัวแปรยาวๆ จะเห็นการลดลงมากที่สุด เมื่อรวมกับการบีบอัด gzip ไฟล์ JavaScript มักจะมีขนาดเล็กกว่าต้นฉบับถึง 80-90%

รหัสของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่

ไม่ ตัวย่อทำงานในเบราว์เซอร์ของคุณ

JavaScript ของฉันจะเล็กลงแค่ไหน?

โดยทั่วไปจะลดลง 30–60% โค้ดที่มีตัวแปรหนักและมีตัวระบุแบบยาวจะบีบอัดมากกว่า โค้ดนิพจน์หนักจะบีบอัดน้อยลง

ฉันควรย่อขนาดด้วยมือหรือไม่?

ไม่เคย. รักษา JavaScript ที่สามารถอ่านได้ในซอร์ส เรียกใช้การลดขนาดเป็นขั้นตอนการสร้างหรือเป็นส่วนหนึ่งของการปรับใช้

มันใช้งานได้กับ TypeScript หรือไม่?

TypeScript จะต้องได้รับการคอมไพล์เป็น JavaScript ก่อนโดยใช้ tsc หรือ esbuild เมื่อคอมไพล์แล้ว JavaScript ที่เป็นผลลัพธ์จะถูกย่อให้เล็กลง

แปลงฟรี

จาวาสคริปต์ เครื่องย่อส่วน

ย่อขนาดและบีบอัดโค้ด JavaScript ทันทีในเบราว์เซอร์ของคุณ ลบความคิดเห็น ยุบช่องว่าง และลดขนาดไฟล์ ฟรีและเป็นส่วนตัว

วาง JavaScript ที่นี่

ลากและวางไฟล์ JS ที่นี่

รองรับไฟล์ .js หรือวาง JavaScript ของคุณด้านบน

หรือ

เกี่ยวกับเครื่องมือนี้

การลดขนาด JavaScript ช่วยลดขนาดของซอร์สโค้ดโดยการลบอักขระที่ไม่จำเป็นออก และ (ด้วยตัวย่อที่เหมาะสม) เปลี่ยนชื่อตัวแปรท้องถิ่นเป็นชื่อที่สั้นลง หมวดหมู่แรก — การลบช่องว่างและความคิดเห็น — ตรงไปตรงมาและปราศจากความเสี่ยง ประการที่สอง — การเปลี่ยนชื่อตัวแปร — จำเป็นต้องมีความเข้าใจกฎขอบเขต และเป็นสิ่งที่ตัวย่อการผลิตเช่น Terser และ esbuild ทำได้ดีที่สุด

เครื่องมือนี้มุ่งเน้นไปที่การลดขนาดอย่างปลอดภัย: การแยกความคิดเห็น การยุบช่องว่าง การลบเครื่องหมายอัฒภาคที่ซ้ำซ้อนออก และลดขนาดรูปแบบที่ชัดเจนให้สั้นลง การเปลี่ยนชื่อตัวแปรเป็นแบบอนุรักษ์นิยม โดยจะแตะเฉพาะตัวแปรภายในเครื่องในขอบเขตที่ชัดเจน และชื่อที่อ้างอิงภายนอกจะถูกทิ้งไว้ตามลำพัง ผลลัพธ์มีฟังก์ชันการทำงานเหมือนกับแหล่งที่มา

สำหรับการลดขนาดระดับการผลิต เครื่องมือเฉพาะ (Terser, esbuild, swc) จะเข้าใจโมเดลขอบเขต ECMAScript แบบเต็ม และสร้างเอาต์พุตที่เล็กลงอย่างมาก เครื่องมือนี้ใช้สำหรับการลดขนาดฝั่งเบราว์เซอร์อย่างรวดเร็วเมื่อไม่มีการตั้งค่าบิวด์แบบเต็ม

ทำไมต้องย่อขนาด JavaScript

โดยทั่วไปชุด JavaScript จะเป็นทรัพยากรเดียวที่ใหญ่ที่สุดบนหน้าเว็บสมัยใหม่ การลดขนาดมักจะทำให้ขนาดลดลง 30–60% เมื่อเทียบกับแหล่งที่มาที่ไม่มีการย่อขนาด เมื่อใช้ร่วมกับ gzip หรือ Brotli การลดลงจะลดลงบ้าง แต่การรวมกันนี้ยังคงช่วยประหยัดไบต์ที่วัดได้ — โดยเฉพาะสำหรับผู้ใช้ที่มีการเชื่อมต่อที่ช้า

JavaScript ที่เร็วขึ้นยังหมายถึงเวลาในการโต้ตอบที่เร็วขึ้น สคริปต์ขนาดเล็กดาวน์โหลดเร็วขึ้น แยกวิเคราะห์เร็วขึ้น และดำเนินการเร็วขึ้น สำหรับไซต์ที่ TTI ส่งผลต่ออัตราตีกลับและการจัดอันดับ SEO การลดขนาดเป็นหนึ่งในชัยชนะที่ถูกที่สุด

วิธีใช้งาน

วาง JavaScript รับเวอร์ชันที่เล็กลง

เพิ่มอินพุต JavaScript: วางแหล่งที่มาลงในพื้นที่ป้อนข้อมูลหรือวางไฟล์ .js ตัวย่อยอมรับ JavaScript สมัยใหม่ (ES2015+) รวมถึงฟังก์ชันลูกศร ตัวอักษรเทมเพลต คลาส และโมดูล
เลือกตัวเลือก: ค่าเริ่มต้นจะลบความคิดเห็นและยุบช่องว่าง การเปลี่ยนชื่อตัวแปรโลคัลเป็นแบบอนุรักษ์นิยม เปิดใช้งานการเปลี่ยนชื่อเชิงรุกมากขึ้นหากคุณต้องการการบีบอัดสูงสุด
ลดขนาด: ตัวย่อจะแยกวิเคราะห์แหล่งที่มา ลบช่องว่างและความคิดเห็น และส่งเอาต์พุตแบบกะทัดรัด ข้อผิดพลาดทางไวยากรณ์ในแหล่งที่มาทำให้เกิดข้อความแสดงข้อผิดพลาดที่ชัดเจน
ใช้เอาต์พุต: แทนที่แหล่งสคริปต์ของคุณในการใช้งานจริง เพื่อการปรับให้เหมาะสมที่สุด ให้จับคู่กับบันเดิลที่จัดการการสั่นไหวของต้นไม้และการกำจัดโค้ดที่ไม่ทำงาน

กรณีการใช้งานทั่วไป

การลดขนาดสคริปต์อินไลน์อย่างรวดเร็ว — สคริปต์สั้นๆ ใน HTML แท็กโฆษณา หรือข้อมูลโค้ดการวิเคราะห์จะได้รับประโยชน์จากการลดขนาดโดยไม่ต้องตั้งค่าบิลด์แบบเต็ม
การเพิ่มประสิทธิภาพโค้ดวิดเจ็ตบุคคลที่สาม — วิดเจ็ตแบบฝังที่กระจายเป็นแท็กสคริปต์ควรถูกย่อให้เล็กลงเพื่อรักษาเวลาในการโหลดของหน้าที่ฝังให้ต่ำ
การบีบอัดสคริปต์ยูทิลิตี้สำหรับ bookmarklets ของเบราว์เซอร์ — สคริปต์ Bookmarklet ต้องพอดีกับขีดจำกัดความยาว URL การลดขนาดช่วยบีบอัดข้อมูลเหล่านั้น
การลดขนาดบันเดิลส่วนขยายเบราว์เซอร์ — การตรวจสอบส่วนขยายมักจะลงโทษการรวมกลุ่มขนาดใหญ่ การลดขนาดจะลดขนาดที่เผยแพร่
การเตรียมสคริปต์สำหรับ HTML แบบฝัง — สคริปต์ที่ฝังในอีเมล องค์ประกอบที่กำหนดเองของ AMP และบริบทที่คล้ายกันมีขีดจำกัดขนาดที่จำกัด

รายละเอียดทางเทคนิค

ตัวย่อโทเค็น JavaScript โดยใช้ parser ที่เคารพไวยากรณ์ ECMAScript ความคิดเห็น (บรรทัดเดียวและหลายบรรทัด) จะถูกลบออก ยกเว้นความคิดเห็นเกี่ยวกับลิขสิทธิ์ที่ทำเครื่องหมายด้วย /*! คำนำหน้า ช่องว่างถูกยุบยกเว้นในกรณีที่จำเป็นต้องใช้ทางวากยสัมพันธ์ (ระหว่างตัวระบุ หลังคำหลัก)

การเปลี่ยนชื่อตัวแปรแบบอนุรักษ์นิยมจะทำให้ตัวแปรภายในเครื่องสั้นลงในขอบเขตที่ตรงไปตรงมา Globals การส่งออก และชื่อที่นำเข้าจะไม่เปลี่ยนชื่อ — ซึ่งจะทำให้การอ้างอิงภายนอกเสียหาย สำหรับการเปลี่ยนชื่อเชิงลึก ให้ใช้ Terser หรือ esbuild พร้อมการวิเคราะห์ที่รับรู้โมดูลที่เหมาะสม

กรณี Edge: การแทรกอัฒภาคอัตโนมัติ (ASI) หมายความว่าตัวย่อจะต้องคงการขึ้นบรรทัดใหม่ในบางบริบทเพื่อหลีกเลี่ยงการเปลี่ยนแปลงพฤติกรรมของโปรแกรม ตัวอักษรเทมเพลต ตัวอักษร regex และ JSX (หากอินพุตรวมอยู่ด้วย) จะถูกเก็บรักษาไว้อย่างแน่นอนเนื่องจากเนื้อหาอาจไม่ปลอดภัยในการบีบอัด

แนวทางปฏิบัติที่ดีที่สุด

ใช้เครื่องมัดรวมจริงสำหรับการผลิต — Webpack, Vite, esbuild และ swc จัดการกับการเขย่าต้นไม้ การแยกโค้ด และการลดขนาดเชิงรุก เครื่องมือนี้มีไว้สำหรับกรณีเฉพาะกิจ
ทดสอบเอาต์พุตที่ย่อขนาดเสมอ — การลดขนาดอาจทำให้เกิดข้อบกพร่องเล็กๆ น้อยๆ เกี่ยวกับ ASI และการเปลี่ยนชื่อเชิงรุกในบางครั้ง เรียกใช้ชุดทดสอบของคุณกับบันเดิลย่อส่วนก่อนที่จะปรับใช้
สร้างแผนที่ต้นทางสำหรับการดีบัก — การลดขนาดการผลิตควรสร้างแผนที่แหล่งที่มา ดังนั้นข้อผิดพลาดในป่าสามารถตรวจสอบย้อนกลับไปยังแหล่งที่มาดั้งเดิมได้ เครื่องมือนี้ไม่สร้างแผนที่ต้นฉบับ ผู้รวมกลุ่มทำ
รวมกับ gzip หรือ Brotli — เลเยอร์การบีบอัดฝั่งเซิร์ฟเวอร์นอกเหนือจากการลดขนาด พวกเขาร่วมกันบรรลุการลดลง 70–80% เป็นประจำเมื่อเทียบกับแหล่งที่มาที่ไม่มีการลดขนาด

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

การลดขนาดทำให้วิธีการทำงานของโค้ดของฉันเปลี่ยนไปหรือไม่: ไม่ การลดขนาดจะลบช่องว่างและความคิดเห็น ซึ่งไม่ส่งผลต่อการดำเนินการ การทำให้ตัวแปรสั้นลง (mangling) จะเปลี่ยนชื่อตัวแปรในเครื่อง แต่ยังคงลักษณะการทำงานไว้ ตัวแปรร่วมและชื่อที่ส่งออกจะถูกเก็บไว้เหมือนเดิม
ฉันควรย่อขนาดในการพัฒนาหรือการผลิตหรือไม่?: ใช้โค้ดย่อขนาดในการผลิตเท่านั้น ในระหว่างการพัฒนา ให้เก็บโค้ดต้นฉบับที่อ่านได้ไว้ เครื่องมือสร้างส่วนใหญ่ (Webpack, Vite, esbuild) จัดการการลดขนาดโดยอัตโนมัติโดยเป็นส่วนหนึ่งของกระบวนการสร้างที่ใช้งานจริง
ความแตกต่างระหว่างการลดขนาดและการทำให้สับสนคืออะไร?: การลดขนาดจะลดขนาดลงในขณะที่ยังคงรักษาโค้ดให้สามารถอ่านได้หากจัดรูปแบบ การสร้างความสับสนโดยเจตนาทำให้โค้ดเข้าใจยาก (การเข้ารหัสสตริง การควบคุมโฟลว์แฟลตเทน) เครื่องมือนี้เน้นไปที่การลดขนาด ไม่ใช่การทำให้สับสน
ฉันควรคาดหวังการลดขนาดเท่าใด: โดยทั่วไป 30-60% ก่อน gzip โค้ดที่มีการแสดงความคิดเห็นที่ดีซึ่งมีชื่อตัวแปรยาวๆ จะเห็นการลดลงมากที่สุด เมื่อรวมกับการบีบอัด gzip ไฟล์ JavaScript มักจะมีขนาดเล็กกว่าต้นฉบับถึง 80-90%
รหัสของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่: ไม่ ตัวย่อทำงานในเบราว์เซอร์ของคุณ
JavaScript ของฉันจะเล็กลงแค่ไหน?: โดยทั่วไปจะลดลง 30–60% โค้ดที่มีตัวแปรหนักและมีตัวระบุแบบยาวจะบีบอัดมากกว่า โค้ดนิพจน์หนักจะบีบอัดน้อยลง
ฉันควรย่อขนาดด้วยมือหรือไม่?: ไม่เคย. รักษา JavaScript ที่สามารถอ่านได้ในซอร์ส เรียกใช้การลดขนาดเป็นขั้นตอนการสร้างหรือเป็นส่วนหนึ่งของการปรับใช้
มันใช้งานได้กับ TypeScript หรือไม่?: TypeScript จะต้องได้รับการคอมไพล์เป็น JavaScript ก่อนโดยใช้ tsc หรือ esbuild เมื่อคอมไพล์แล้ว JavaScript ที่เป็นผลลัพธ์จะถูกย่อให้เล็กลง

จาวาสคริปต์ เครื่องย่อส่วน

ลากและวางไฟล์ JS ที่นี่

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

HTML เครื่องย่อส่วน

ซีเอสเอส เครื่องย่อส่วน

JSON ฟอร์แมตเตอร์ & เครื่องมือตรวจสอบ

ตัวจัดรูปแบบ XML & เครื่องมือตรวจสอบ

เกี่ยวกับเครื่องมือนี้

ทำไมต้องย่อขนาด JavaScript

วิธีใช้งาน

กรณีการใช้งานทั่วไป

รายละเอียดทางเทคนิค

แนวทางปฏิบัติที่ดีที่สุด

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

Related Articles

Essential Developer Tools: JSON, Base64, RegEx, and More

Hashing, Encryption, and Encoding Explained: A Developer's Security Guide

Spreadsheet & Data Conversion Guide: Excel, CSV, JSON, and More

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk