Softonic

เครื่องมือลดขนาดโค้ด JavaScript

ขั้นตอน 1 / 3
ถัดไป

นำโค้ด JavaScript มาวางไว้แล้วจะได้เวอร์ชันที่มีขนาดเล็กลงถึง 40–70% โดยมีการตัดส่วนว่างออก ย่อตัวแปรให้เหลือเพียงตัวอักษรเดียว ลบกิจกรรมในสาขาที่ไม่จำเป็นออกไป รวมถึงบูรณาการค่าคงที่เข้าด้วยกัน และหากเปิดใช้งานฟังก์ชันนี้ จะมีการลบคำอธิบายหรือคำบรรยายประกอบออกไปด้วย เหมาะอย่างยิ่งสำหรับการตรวจสอบขนาดโค้ดอย่างรวดเร็ว การฝังโค้ดเพียงครั้งเดียว หรือหน้าลอนดิ้งเมื่อไม่ได้ใช้เครื่องมือสร้างโปรแกรมแบบเต็มรูปแบบ

วิธีลดขนาดไฟล์ JavaScript ให้น้อยที่สุด

  1. 1

    วางแหล่งที่มา

    ใช้ JavaScript รุ่น ES5+ ที่ถูกต้องทั้งหมด หากใช้รุ่น ES6 หรือสูงกว่า (เช่น ตัวแปรแบบเทมเพลต คลาส และโมดูล) โปรดตรวจสอบให้แน่ใจว่าเป้าหมายของคุณสอดคล้องกับข้อกำหนด

  2. 2

    เลือกระดับการลดขนาด

    ปลอดภัย (ช่องว่าง + คอมเมนต์), เริ่มต้น (+ ย่อชื่อตัวแปร), รุนแรง (+ ย่อชื่อพร็อพเพอร์ตี ซึ่งอาจทำให้การเข้าถึง DOM เสียหาย)

  3. 3

    ลดขนาดให้น้อยที่สุด

    เครื่องมือนี้จะดำเนินการแปลงข้อมูลที่เข้ากันได้กับ Terser และแสดงผลลัพธ์พร้อมจำนวนไบต์ก่อนและหลังการแปลง

  4. 4

    คัดลอกหรือดาวน์โหลด

    วางผลลัพธ์ลงในแท็ก `<script>` หรือบันทึกเป็นไฟล์ `.min.js` เพื่อนำไปใช้งานผ่าน CDN ของคุณ

ไบต์ถูกนำไปใช้ที่ใด

ไฟล์ที่ถูกลดขนาดโดยทั่วไปจะมีขนาดเล็กกว่าไฟล์ต้นฉบับประมาณ 40–70% การบีบอัดด้วย gzip (หรือ Brotli ซึ่ง Cloudflare และ CDN ส่วนใหญ่ใช้) จะช่วยลดขนาดเพิ่มเติมอีก 60–75% เมื่อนำมาบวกกันแล้ว ไฟล์ต้นฉบับขนาด 100 KB สามารถส่งผ่านเครือข่ายได้ในขนาดเพียงประมาณ 15–25 KB

แหล่งที่มา ขนาดย่อ +gzip +Brotli
jQuery 3.6 87 KB 30 KB 27 KB
Lodash 4.17 71 KB 25 KB 22 KB
React + ReactDOM 18 140 KB 44 KB 39 KB

เทคนิคที่นำมาใช้

เทคนิค ทำหน้าที่อะไร
การลบช่องว่าง ลบช่องว่าง แท็บ และการขึ้นบรรทัดใหม่
การลบคอมเมนต์ ลบ // และ /* */ (ยกเว้น !important)
การย่อชื่อตัวแปร (mangling) เปลี่ยนชื่อ userName เป็น u (ปลอดภัยตามขอบเขต)
การย่อชื่อพร็อพเพอร์ตี เปลี่ยนชื่อ obj.foo เป็น obj.a (ไม่ปลอดภัย)
การพับค่าคงที่ 1 + 2 + 3 → 6
การกำจัดโค้ดที่ตายแล้ว ลบกิ่งสาขาที่อยู่หลัง return
การแทรกลำดับการควบคุมแบบอินไลน์ แทรกฟังก์ชันเล็ก ๆ ที่ถูกใช้เพียงครั้งเดียว
การบีบอัดสตริงลิเทอรัล รวมค่าคงที่ของสตริงที่ซ้ำกัน

โหมดปลอดภัย เทียบกับ โหมดรุนแรง

  • โหมดปลอดภัย จะคงชื่อตัวแปรไว้ และลบเฉพาะช่องว่างเท่านั้น เหมาะกับการดีบักที่คุณต้องการ stack trace ที่อ่านง่าย
  • โหมดเริ่มต้น จะย่อชื่อตัวแปรในขอบเขตเฉพาะ (locals) แต่คงชื่อตัวแปรส่วนกลาง (globals) และชื่อพร็อพเพอร์ตีไว้ ใช้งานได้กับโค้ดส่วนใหญ่
  • โหมดรุนแรง จะย่อชื่อ ทุกอย่าง รวมถึงชื่อพร็อพเพอร์ตีด้วย ซึ่งมักทำให้โค้ดที่เข้าถึงพร็อพเพอร์ตีแบบไดนามิก (obj["prop"], Object.keys(obj)) ทำงานผิดพลาด เว้นแต่คุณจะกำหนดชื่อที่สงวนไว้

เมื่อใดควรลดขนาดโค้ด และเมื่อใดไม่ควร

  • ควร ลดขนาดโค้ดในระบบจริง (production) สำหรับทุกไฟล์ที่เบราว์เซอร์ดาวน์โหลด
  • ควร แนบ source map ไปด้วย เพื่อให้ DevTools ของเบราว์เซอร์ยังแสดงชื่อเดิมได้ขณะดีบัก
  • อย่า ลดขนาดโค้ดในระหว่างการพัฒนา เพราะจะเสียเวลาในการบิลด์และทำให้ข้อความแสดงข้อผิดพลาดอ่านยาก
  • อย่า ลดขนาดโค้ดที่ถูกลดขนาดไปแล้ว ไฟล์ .min.js เมื่อลดขนาดซ้ำจะเล็กลงเพียงประมาณ 1–3% แต่กลับเสี่ยงที่จะเสียหาย

ข้อผิดพลาดที่พบบ่อย

  • ไม่ได้กำหนดชื่อที่สงวนไว้ การเข้าถึงคุณสมบัติแบบไดนามิก (obj["payment_method"]) จะเกิดปัญหาเมื่อ payment_method ถูกเปลี่ยนแปลงเป็น a
  • การลืมแผนที่ต้นทาง: หากไม่มีไฟล์ .map ข้อผิดพลาดในการผลิตจะไม่สามารถอ่านได้
  • การลดขนาดโค้ดของ CommonJS และ ESM พร้อมกัน ระบบโมดูลแบบผสมจำเป็นต้องมีการปรับโครงสร้างโค้ดอย่างละเอียดก่อนดำเนินการลดขนาด

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

โดยทั่วไปไฟล์จะมีขนาดเล็กลงประมาณ 40–70% เมื่อไม่ได้บีบอัด และจะยิ่งลดลงอีก 60–75% เมื่อใช้การบีบอัดแบบ gzipped หรือ Brotli โดยไฟล์ต้นฉบับขนาด 100 KB มักจะถูกส่งผ่านเครือข่ายในรูปแบบที่มีขนาดเพียงประมาณ 15–25 KB เท่านั้น

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

ใช่ ให้เปิด/ปิดตัวเลือก “ generate source map ” เครื่องมือจะส่งคืนโค้ดที่ถูกลดขนาดพร้อมไฟล์ .map ซึ่งระบุตำแหน่งของแต่ละไบต์กลับไปยังแหล่งโค้ดต้นฉบับ จากนั้นอัปโหลดทั้งสองไฟล์ไปยัง CDN ของคุณ เพื่อให้ DevTools สามารถแสดงข้อมูล stack trace ที่อ่านเข้าใจได้อย่างชัดเจน

ใช่, รองรับทุกฟีเจอร์หลัก ได้แก่ การรอค่าในระดับสูงสุด (top-level await), ฟิลด์ของคลาส, เมธอดส่วนตัว, การรวมค่าแบบ nullish, การเชื่อมโยงแบบเลือกได้ (optional chaining), และเครื่องหมายแบ่งค่าตัวเลข (numeric separators) สำหรับข้อเสนอใหม่ล่าสุด (Decorator Stage-3) โปรดตรวจสอบแฟล็กเฉพาะที่เกี่ยวข้อง

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

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบอีเมล

ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig ด้วยกฎสไตล์และขนาดการเยื้อง การจบบรรทัด ชุดอักขระ และช่องว่างของคุณ เพื่อให้การจัดรูปแบบสอดคล้องกันในทุก IDE และโปรแกรมแก้ไข

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องมือนี้มีให้บริการในภาษาอื่น