ตัวลดขนาด JS

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

การลดขนาด JavaScript ช่วยแก้ปัญหาอะไร?

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

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

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

การลดขนาดไม่ได้ยืนยันว่า JavaScript ทำงานถูกต้อง สคริปต์อาจลดขนาดได้สำเร็จทั้งที่ยังเรียก API ผิด อ้างถึงตัวแปรที่เข้าถึงไม่ได้ หรือมีโค้ดที่ล้มเหลวเฉพาะขณะทำงาน

ใช้ตัวลดขนาด JS อย่างไร?

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

1. ตรวจสอบไวยากรณ์ ใช้ linter และรันการทดสอบอัตโนมัติกับซอร์สโค้ดก่อน
2. วางสคริปต์ทั้งหมดลงใน JS รวมถึงการนำเข้าโมดูลหรือฟังก์ชันครอบที่เป็นส่วนหนึ่งของไฟล์
3. ดู จำนวนอักขระ JS และ จำนวนอักขระ JS ที่บีบอัดแล้ว เพื่อเปรียบเทียบจำนวนอักขระที่เปลี่ยนไป
4. ทดสอบว่า JavaScript ที่ลดขนาดแล้วยังทำงานถูกต้องในเบราว์เซอร์และสภาพแวดล้อมการใช้งานเดียวกับไฟล์จริง
5. ใช้ชื่อไฟล์ที่สังเกตได้ง่าย เช่น app.min.js หากจะเก็บเวอร์ชันลดขนาดและเวอร์ชันที่อ่านง่ายไว้ด้วยกัน

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

ผลลัพธ์ที่ลดขนาดแล้วมีอะไรบ้าง?

ผลลัพธ์ประกอบด้วย JavaScript แบบกระชับและจำนวนอักขระสองค่า โดย จำนวนอักขระ JS คือความยาวของข้อมูลที่ป้อน ส่วน จำนวนอักขระ JS ที่บีบอัดแล้ว คือความยาวของค่า JS ที่บีบอัดแล้ว ที่เครื่องมือส่งกลับ

จำนวนเหล่านี้คำนวณด้วยฟังก์ชัน mb_strlen ของ PHP ซึ่งวัดความยาวของสตริงแบบหลายไบต์ ไม่ใช่เพียงนับจำนวนไบต์ ดังนั้น จำนวนอักขระจึงไม่เท่ากับขนาดสุดท้ายที่ส่งผ่านเครือข่าย อักขระ UTF-8 อาจใช้มากกว่าหนึ่งไบต์ และ gzip หรือ Brotli ยังลดขนาดไฟล์ที่ส่งได้อีก

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

ตัวอย่างสั้น ๆ และข้อมูลป้อนเข้าที่ต้องระวัง

ตัวอย่างต่อไปนี้แสดงการตัดช่องว่างแบบง่าย ๆ

ข้อมูลป้อนเข้า

function add(a, b) { return a + b; }

รูปแบบกระชับ

function add(a,b){return a+b;}

การจัดรูปแบบรอบออบเจ็กต์ก็ลบออกได้โดยไม่เปลี่ยนค่าของพร็อพเพอร์ตี

ข้อมูลป้อนเข้า

const settings = { theme: "dark", retries: 2 };

รูปแบบกระชับ

const settings={theme:"dark",retries:2};

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

• ช่องว่างในสตริง ถือเป็นข้อมูล ช่องว่างใน "Newcastle upon Tyne" ต้องคงอยู่
• เครื่องหมายวรรคตอน อาจเป็นส่วนหนึ่งของไวยากรณ์ การลบช่องว่างออกจาก a + +b อาจทำให้ลำดับโทเค็นเปลี่ยนไป
• บรรทัดใหม่ บางครั้งมีผลต่อการเติมเครื่องหมายอัฒภาคอัตโนมัติ รวมถึงโค้ดที่ตามหลัง return, break หรือ continue ไม่อนุญาตให้ขึ้นบรรทัดใหม่ทันทีหลัง throw เพราะนิพจน์ต้องเริ่มในบรรทัดเดียวกัน
• อักขระที่มีเครื่องหมายกำกับและอักขระนอกอักษรละติน อาจปรากฏในสตริง และอาจใช้ในตัวระบุได้หากกฎการตั้งชื่อตัวระบุของ JavaScript อนุญาต ขนาดเป็นไบต์ของอักขระเหล่านี้อาจไม่เท่ากับจำนวนอักขระ
• ตัวเลข เป็นโทเค็นในซอร์สโค้ด ไม่ใช่คำสั่งเกี่ยวกับการนับอักขระ เครื่องมือลดขนาดต้องรักษาค่าทางตัวเลขไว้ แม้จะเลือกใช้รูปแบบการเขียนอื่นที่สั้นกว่าแต่มีค่าเท่ากัน

เมื่อใดที่การลดขนาด JavaScript ไม่คุ้มค่า?

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

นอกจากนี้ แทบไม่มีเหตุผลที่จะจัด JavaScript ให้อ่านง่ายแล้วนำไปลดขนาดอีก หากมีเพียงเครื่องที่ต้องอ่าน เก็บซอร์สที่คนอ่านได้ไว้สำหรับการบำรุงรักษา แล้วสร้างไฟล์สำหรับนำขึ้นใช้งานจากซอร์สนั้น สำหรับแอปพลิเคชันที่มีระบบชัดเจนอยู่แล้ว เครื่องมือบิลด์อย่าง esbuild, Rollup หรือ webpack มักเหมาะกว่า เพราะทำการรวมโมดูลและสร้างซอร์สแมปโดยอัตโนมัติได้ ความสามารถในการลดขนาดอาจมีมาให้ในตัว หรือเพิ่มผ่านการกำหนดค่าหรือปลั๊กอิน ส่วน Terser เป็นเครื่องมือลดขนาดโดยเฉพาะ

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

หากกำลังเตรียมไฟล์สแตติกทั้งหมดของหน้าเว็บ ตัวบีบอัด CSS และตัวลดขนาด HTML สามารถลดขนาดไฟล์ในรูปแบบนั้น ๆ ได้ ใช้เครื่องมือแยกกันสำหรับแต่ละรูปแบบ เพราะมีกฎการแยกวิเคราะห์และการใช้ช่องว่างต่างกัน

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

เครื่องมือนี้สร้างซอร์สแมปให้ไหม?

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

ลดขนาดแล้วจะป้องกันคนคัดลอก JavaScript ได้ไหม?

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

วางโค้ดที่มี API key ลงในเครื่องมือได้ไหม?

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

จำนวนอักขระน้อยลงทำให้หน้าเว็บโหลดเร็วขึ้นเสมอไหม?

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

หลังลดขนาดแล้วควรเก็บนามสกุล .js ไว้ไหม?

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