ลองยัง Prepack เครื่องมือที่จะช่วยแปลงโค๊ด JavaScript ของคุณให้เร็วขึน!

แผ่นดินผืนงามของดาวสีน้ำเงินยังมีประเทศสีเขียวชื่อว่า "ไตแพง" อุตสาหกรรมท่องเที่ยวของประเทศนี้มุ่งสนับสนุนการท่องเที่ยวทางทะเล "ไตแพง" จึงคิดแผนซื้อเรือดำน้ำเพื่อพานักท่องเที่ยวล่องเรือชมปะการัง (ฟอกขาว) แหม~ โรแมนติกดีจัง หวังว่าดำๆไปคงไม่คว่ำหงายท้องเป็นเรือไททานิคนะ

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

ผลสรุปจากการหารือกว่า 99 ชั่วโมง รัฐบาลตัดสินใจสั่งซื้อเรือดำน้ำล็อตใหม่ที่ขนาดเล็กลง แน่นอนว่าการสั่งซื้อนี้ยังใช้เรือดำน้ำจากประเทศ "เจียม" เช่นเดิม!

แม้ถนนลูกรังจะยังไม่หมดไปจากประเทศ แต่เราก็ได้เรือดำน้ำเล็กๆพร้อมพานักท่องเที่ยวแล่นโฉบเฉี่ยวได้อย่างสบายในน่านน้ำตื้นเขินของอ่าวไตต่อไป ลั๊ลลา~ ปาจิงโกะ

แม้เรื่องราวข้างต้นจะเป็นเพียงเรื่องสมมติ แต่สถานการณ์เช่นนี้ก็ยังใช้ได้ดีกับโลก JavaScript ของเรา...

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

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

จะดีกว่าไหมถ้าจะมีเครื่องมือซักตัวที่ทำให้โค้ดอวบอ้วนที่เราเขียนจัดระเบียบเป็นอย่างดี กลายเป็นเรือดำน้ำขนาดเล็กที่พร้อมจะแล่นอย่างสะดวกในน่านน้ำขนาดเล็กของเว็บบราวเซอร์? ถ้ามีหละก็... ซื้อเลย!

รู้จัก Prepack

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

1{
2  function hello() {
3    return 'hello'
4  }
5  function world() {
6    return 'world'
7  }
8
9  const msg = hello() + ' ' + world()
10
11  console.log(msg)
12}

จากตัวอย่างข้างต้น เมื่อผ่านการ compile ด้วย prepack จะได้ผลลัพธ์ดังนี้

1console.log('hello world')

อุต๊ะ พระพุทธ พระธรรม พระสงฆ์! กระผมถึงกับอุทาน

Prepack ทราบว่าเราต้องการผลลัพธ์สุดท้ายคือ msg มาใช้แสดงผล ดังนั้นการคำนวณตรงกลางคือการเรียกฟังก์ชันจึงไม่จำเป็นสำหรับโค้ดผลลัพธ์ มันจึงทำการเรียกฟังก์ชันให้กับเราอย่างเสร็จสรรพ และคืนเฉพาะผลลัพธ์การคำนวณที่ควรเป็นให้กับเรา นับว่าช่วยลดการคำนวณที่ไม่จำเป็น ประหยัดหน่วยความจำ และไม่ต้องผลาญภาษี เอ๊ย CPU ให้มากมายเลยหละ~

ลองดูตัวอย่างถัดไปกับการหา Factorial กันครับ

1{
2  function factorial(n) {
3    if (n <= 1) return 1
4    return n * factorial(n - 1)
5  }
6
7  console.log(factorial(5))
8}

กว่า 7 ปีของการบำเพ็ญตบะที่วัดเส้าหลิน Prepack จึงมีดวงตาเห็นธรรมว่า factorial นั้นไซร์ไม่จำเป็นต้องเรียกไปเรียกมาแบบ recursive function ให้เสียเวลาหรอก เอ็งอยากได้ผลลัพธ์ของ 5! ใช้ไหม ได้เลยข้าจักคำนวณให้..

1console.log(120)

นี่หรือเรือดำน้ำ! กระผมถึงกับอุทาน

Prepack ชั่งรู้ใจ ไร้การคำนวณที่ไม่จำเป็น เราจึงได้โค้ดที่พร้อมทำงาน เรียบง่ายและรวดเร็ว ไววับดั่งหมุดหาย~

ทดลองติดตั้งและใช้งาน

โฆษณาขายเป็น TV Direct ซะขนาดนี้ เพื่อนๆคงอยากลองใช้งานกันจน VAT 7% สั่นกระเพื่อมๆกันแล้วใช่ไหมละ~

หากเพื่อนๆสนใจทดลองใช้โดยไม่อยากติดตั้งเครื่องมือ ง่ายมากเข้าไปใช้งานในหน้า REPL เลยซิ

หาก REPL ไม่สามารถตอบสนองต่อม need ของเพื่อนๆได้ จะติดตั้ง Prepack บนเครื่องและทดลองใช้งานก็ไม่ขัดศรัทธา

สรุป

Prepack นั้นยังใหม่ ใหม่มากจนเพื่อนๆอย่าพึ่งเอาไปใช้บน Production เชียวหละ ทดลองเล่นลูบๆคลำๆกันไปก่อน ส่วนใครสนใจเพิ่มเติมก็สามารถอ่านรายละเอียดจาก หน้าเว็บหลัก ได้ครับ อ้า~ เรือดำน้ำจงเจริญ!