ข้ามไปยังเนื้อหา
🛠️
Whiz Tools

เครื่องมือบีบอัดโค้ด JavaScript - ตัวเพิ่มประสิทธิภาพโค้ด JS ออนไลน์ฟรี

เครื่องมือบีบอัดโค้ด JavaScript ฟรีเพื่อลดขนาดโค้ดโดยการลบช่องว่างและคอมเมนต์ ทำการเพิ่มประสิทธิภาพไฟล์ JS ได้ทันทีโดยไม่ต้องติดตั้งใดๆ

เครื่องมือบีบอัด JavaScript

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

เครื่องมือบีบอัด JavaScript นี้จะลบช่องว่างและคอมเมนต์ที่ไม่จำเป็นเพื่อลดขนาดของโค้ด โดยยังคงฟังก์ชันการทำงานของโค้ดไว้

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

เอกสารประกอบการใช้งาน

เครื่องมือย่อขนาด JavaScript คืออะไร?

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

ไฟล์ JavaScript ที่มีขนาดเล็กกว่าจะดาวน์โหลดและโหลดได้เร็วกว่า ดังนั้นการย่อขนาดจึงเป็นขั้นตอนที่ทำกันทั่วไปก่อนเผยแพร่เว็บไซต์

การย่อขนาด JavaScript ทำงานอย่างไร

เครื่องมือนี้อ่านโค้ดทีละอักขระแล้วสร้างโค้ดขึ้นใหม่ โดยตัดสิ่งที่ผู้อ่านต้องใช้แต่เอนจิน JavaScript ไม่ต้องใช้ออก สิ่งที่ลบออก ได้แก่:

  • คอมเมนต์ ทั้งคอมเมนต์แบบบรรทัดเดียว // single-line และคอมเมนต์แบบหลายบรรทัด /* multi-line */ รวมถึงคอมเมนต์รูปแบบ JSDoc
  • ช่องว่าง แท็บ และบรรทัดว่างส่วนเกินที่มีไว้เพื่อให้อ่านโค้ดได้ง่ายขึ้นเท่านั้น

เครื่องมือนี้ไม่เพิ่มหรือลบสิ่งอื่นใด ไม่เคยลบอัฒภาค วงเล็บ หรืออักขระอื่นใดที่มีอยู่ในโค้ด และไม่เคยแทรกเครื่องหมายวรรคตอนใหม่ นอกจากนี้ยังคงสิ่งต่อไปนี้ไว้โดยไม่เปลี่ยนแปลง:

  • ข้อความภายในสตริง ("like this", 'like this') และลิเทอรัลแม่แบบ (`like this`) แม้ข้อความนั้นจะมีช่องว่างหรือดูเหมือนคอมเมนต์ก็ตาม
  • ลิเทอรัลนิพจน์ปรกติ เช่น /[a-z]+/g พร้อมแฟล็กทั้งหมด ได้แก่ d, g, i, m, s, u, v และ y
  • อัฒภาค จุลภาค และวงเล็บทุกตัวที่มีอยู่ในโค้ดเดิม

บางครั้งไม่สามารถลบช่องว่างระหว่างโทเคนสองตัวได้โดยไม่ทำให้ความหมายเปลี่ยนไป return a ไม่สามารถเปลี่ยนเป็น returna ได้ เพราะจะถูกอ่านเป็นคำเดียวกัน เช่นเดียวกับชื่อที่เขียนด้วยอักษรนอกระบบอักษรภาษาอังกฤษ ดังนั้น typeof π จึงคงช่องว่างไว้ เมื่อการลบช่องว่างจะทำให้โทเคนสองตัวรวมกัน เครื่องมือจะคงช่องว่างเดี่ยวไว้แทน

การขึ้นบรรทัดใหม่ก็อาจมีความสำคัญเช่นกัน บางครั้ง JavaScript จะแทรกอัฒภาคโดยอัตโนมัติที่ท้ายบรรทัด ซึ่งเป็นกฎที่เรียกว่า Automatic Semicolon Insertion หากการลบบรรทัดใหม่อาจทำให้กฎนี้ทำงานหรือไม่ทำงาน หรือหากบรรทัดใหม่นั้นอยู่หลังวงเล็บปีกกาปิด } เครื่องมือจะคงการขึ้นบรรทัดใหม่เดี่ยวไว้ นี่เป็นเหตุผลที่โค้ดที่ย่อขนาดแล้วไม่ได้ถูกรวมเป็นบรรทัดเดียวเสมอไป เพราะการขึ้นบรรทัดใหม่บางตำแหน่งเปลี่ยนความหมายของโค้ดและจำเป็นต้องคงไว้

วิธีใช้เครื่องมือย่อขนาด JavaScript นี้

  1. วางโค้ด JavaScript ลงในช่องป้อนข้อมูล
  2. เลือก "Minify"
  3. อ่านผลลัพธ์ในช่องผลลัพธ์ พร้อมขนาดเดิม ขนาดหลังย่อ และเปอร์เซ็นต์การลดขนาด
  4. เลือก "Copy" เพื่อคัดลอกโค้ดที่ย่อขนาดแล้ว

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

ตัวอย่าง: การย่อขนาดฟังก์ชัน

ก่อน:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

หลัง:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

คอมเมนต์ทั้งสามรายการหายไป และการเยื้องบรรทัดถูกลบออก อัฒภาคหลัง a+b ยังคงอยู่ เพราะเครื่องมือไม่เคยลบอัฒภาคที่มีอยู่แล้วในโค้ด การขึ้นบรรทัดใหม่ก่อน const ก็คงอยู่เช่นกัน เพราะอยู่หลังวงเล็บปีกกาปิด }

ตัวอย่าง: การย่อขนาดคลาส

ก่อน:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

หลัง:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

สังเกตว่ามีการคงการขึ้นบรรทัดใหม่ไว้ก่อนแต่ละเมธอดและก่อนวงเล็บปีกกาปิดของคลาส } การขึ้นบรรทัดใหม่ทุกตำแหน่งดังกล่าวอยู่หลังวงเล็บปีกกาปิด } ในโค้ดเดิม ดังนั้นกฎที่ป้องกันไม่ให้ Automatic Semicolon Insertion เปลี่ยนแปลงความหมายจึงคงบรรทัดเหล่านั้นไว้ อัฒภาคภายในแต่ละเมธอดก็คงอยู่เช่นกัน

สูตรคำนวณการลดขนาด

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

1reduction = round((1 - minified characters / original characters) x 100)
2

ตัวอย่างฟังก์ชันข้างต้นมี 213 อักขระก่อนย่อขนาด และมี 103 อักขระหลังย่อ ดังนั้น 1–103 / 213 = 0.5164 ซึ่งเท่ากับ 51.64% และเครื่องมือจะแสดง 52% ตัวอย่างคลาสลดจาก 515 อักขระเหลือ 304 อักขระ คิดเป็น 40.97% และแสดงเป็น 41%

ข้อจำกัดของเครื่องมือย่อขนาดนี้

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

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

เครื่องมือย่อขนาด JavaScript ลบอะไรออกบ้าง?

เครื่องมือนี้ลบคอมเมนต์และช่องว่างที่ไม่จำเป็นต่อการทำงานของโค้ด แต่ไม่ลบอัฒภาค วงเล็บ หรืออักขระอื่นใดที่มีอยู่ในโค้ดเดิม

การย่อขนาด JavaScript เปลี่ยนวิธีการทำงานหรือไม่?

ไม่เปลี่ยน โค้ดที่ย่อขนาดแล้วควรให้ผลลัพธ์เช่นเดียวกับโค้ดเดิม มีเพียงรูปแบบการจัดวางที่เปลี่ยนไป

เหตุใดโค้ดที่ย่อขนาดแล้วจึงยังมีการขึ้นบรรทัดใหม่ในบางครั้ง?

การขึ้นบรรทัดใหม่อาจจำเป็นตามกฎ Automatic Semicolon Insertion ของ JavaScript หรืออาจอยู่หลังวงเล็บปีกกาปิด } การลบออกอาจเปลี่ยนการทำงานของโค้ด ดังนั้นเครื่องมือจึงคงการขึ้นบรรทัดใหม่เดี่ยวไว้ในตำแหน่งเหล่านั้นแทนการลบ

การย่อขนาดเหมือนกับการบีบอัดหรือไม่?

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

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

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

สามารถเปลี่ยนโค้ดที่ย่อขนาดแล้วกลับเป็นโค้ดเดิมได้หรือไม่?

เครื่องมือจัดรูปแบบโค้ดสามารถเติมช่องว่างกลับมาได้ แต่คอมเมนต์ รวมถึงชื่อตัวแปรและชื่อฟังก์ชันเดิมจะหายไป เว้นแต่จะบันทึก source map แยกไว้

เอกสารอ้างอิง

  1. MDN Web Docs. "Minification." อภิธานศัพท์ MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," หัวข้อ 12.10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," หัวข้อ 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," หัวข้อ 22.2.6, "Properties of the RegExp Prototype Object" (ชุดแฟล็ก d g i m s u v y) https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object