วิธีย่อขนาด JavaScript — เครื่องมือและวิธีการที่แนะนำ

ผู้ใช้ส่วนใหญ่ต้องการประสบการณ์การท่องเว็บที่หรูหรา และ JavaScript เป็นที่ชื่นชอบสำหรับนักพัฒนามาอย่างยาวนานในการมอบประสบการณ์ที่ยกระดับนี้

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

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

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

JavaScript คืออะไร?

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

ในขณะที่ HTML และ CSS สร้างโครงสร้างของเว็บไซต์ JavaScript จะเพิ่มคุณสมบัติที่ซับซ้อนซึ่งนำการโต้ตอบมาสู่เว็บไซต์ของคุณเพื่อดึงดูดผู้ใช้ ตัวอย่างเช่น JavaScript มีองค์ประกอบที่ซับซ้อน เช่น ตู้เพลงวิดีโอแบบเลื่อน วิดีโอ 2D/3D และแผนที่แบบโต้ตอบ

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

การลดขนาดโค้ดคืออะไร?

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

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

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

คุณอาจต้องทำการเปลี่ยนแปลงเพิ่มเติมในโค้ดเช่นกัน — ตัวอย่างเช่น ฟังก์ชัน inlining, การลบตัวคั่นบล็อก, การใช้เงื่อนไขโดยปริยาย หรือการเขียนตัวแปรภายในเครื่องใหม่

Unminified vs Minified JavaScript Code Examples

มาดูตัวอย่างโค้ดกัน บล็อกแรกนี้เป็น JavaScript ปกติที่ไม่ลดขนาด:

 // program to check if the string is palindrome or not function checkPalindrome(str) { // find the length of a string const len = string.length; // loop through half of the string for (let i = 0; i < len / 2; i++) { // check if first and last string are same if (string[i] !== string[len - 1 - i]) { return 'It is not a palindrome'; } } return 'It is a palindrome'; } // take input const string = prompt('Enter a string: '); // call the function const value = checkPalindrome(string); console.log(value);

ตอนนี้เรามาดูกันว่าโค้ดเดียวกันนั้นจะหน้าตาเป็นอย่างไรเมื่อถูกย่อให้เล็กสุด:

 function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++) if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"} const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);

อย่างที่คุณเห็น โค้ดบล็อกที่สองมีขนาดเล็กกว่าและกะทัดรัดกว่ามาก ซึ่งหมายความว่าจะโหลดและแสดงผลเร็วขึ้น ลดเวลาในการโหลดหน้าเว็บและทำให้เนื้อหาเร็วขึ้น

ในที่นี้ เราได้ลดขนาด 529 ไบต์เป็น 324 ไบต์ เพิ่มพื้นที่ว่าง 205 ไบต์ และลดจำนวนการโหลดหน้าเว็บลงเกือบ 40%

มันเหมือนกับการนำหนังสือ 529 หน้ามารวมกันเป็นหนังสือ 324 หน้า แน่นอน มนุษย์อาจมีปัญหาในการอ่าน แต่เครื่องสามารถอ่านได้อย่างรวดเร็วโดยไม่มีปัญหา

เมื่อเชื่อมต่อไฟล์ JavaScript หลายไฟล์เข้ากับไฟล์ย่อแต่ละไฟล์ การลดขนาดโค้ดจะลดจำนวนคำขอ HTTP ที่ส่งไปยังเซิร์ฟเวอร์ นอกจากนี้ยังช่วยลดการใช้แบนด์วิดท์ของไซต์อีกด้วย ยิ่งไปกว่านั้น การลดขนาดโค้ดยังช่วยลดเวลาในการรันสคริปต์ — ทุกสิ่งที่ลด Time to First Byte (TTFB) ของคุณ

ทำไมคุณควรย่อขนาดโค้ด JavaScript?

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

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

โค้ด JavaScript เวอร์ชันย่อเล็กสุดสามารถลดขนาดไฟล์ได้มากถึง 30–90% ดังนั้น การลดขนาด JavaScript ได้กลายเป็นพิธีกรรมที่คุ้นเคยสำหรับนักพัฒนาทั้งหมด

ผู้พัฒนาไลบรารี JavaScript รายใหญ่ทุกราย (Angular, Bootstrap และอื่นๆ) จัดเตรียม JavaScript เวอร์ชันย่อสำหรับการปรับใช้ที่ใช้งานจริง และแต่ละคนใช้ส่วนขยาย min.js เพื่อระบุสิ่งนี้

ประโยชน์ของการลดขนาดโค้ด JavaScript

นี่คือภาพรวมคร่าวๆ ของประโยชน์ที่คุณจะได้รับหลังจากใช้ JavaScript minification:

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

ความแตกต่างระหว่างการย่อขนาด JavaScript, Uglification และการบีบอัด

การลดขนาด JavaScript, uglification หรือการบีบอัด JavaScript มีความคล้ายคลึงกันในการทำงาน อย่างไรก็ตาม มีจุดประสงค์ที่แตกต่างกัน

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

JavaScript มีไลบรารี่ที่เรียกว่า UglifyJS เพื่อ uglify รหัสโดยอัตโนมัติ ปรับปรุงประสิทธิภาพและลดความสามารถในการอ่านเพื่อให้รหัสปลอดภัยและไม่น่าสนใจสำหรับขโมย

การบีบอัดไม่เหมือนกับการลดขนาดหรือการทำให้ดูน่าเกลียด มันใช้อัลกอริธึมการบีบอัดเช่น GZIP เพื่อเขียนโค้ดใหม่ให้อยู่ในรูปแบบไบนารี ทำให้มีขนาดเล็กลงและโหลดเร็วขึ้นมาก

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

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

วิธีย่อโค้ด JavaScript ให้เล็กลง

คุณสามารถย่อโค้ด JavaScript ของคุณได้หลายวิธี แต่ละวิธีเหล่านี้ใช้แนวทางที่แตกต่างจากวิธีอื่นๆ

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

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

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

วิธีย่อขนาด JavaScript ด้วยตนเอง: เครื่องมือ 5 อันดับแรก

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

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

นี่คือเครื่องมือย่อขนาด JavaScript ที่ดีที่สุดที่สามารถช่วยคุณปรับปรุงประสิทธิภาพเว็บของคุณได้

1. JSMin

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

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

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

2. Microsoft Ajax ย่อขนาด

Microsoft Ajax Minifier ช่วยให้คุณปรับปรุงประสิทธิภาพของเว็บแอปพลิเคชันของคุณโดยลดขนาดของไฟล์ JavaScript และ CSS โดยจะลบความคิดเห็น พื้นที่ที่ไม่จำเป็น อัฒภาค ฟังก์ชัน และวงเล็บ

นอกจากการย่อตัวแปรโลคัล ชื่อฟังก์ชัน ใบเสนอราคา/ ใบเสนอราคาคู่ การรวมการประกาศตัวแปรที่อยู่ติดกันแล้ว ยังลบโค้ดที่ไม่ได้ดำเนินการอีกด้วย

ด้วย AjaxMin คุณสามารถวิเคราะห์ประสิทธิภาพและชาร์จ JS minifier ในเบื้องหลังได้ และเมื่อย่อขนาดเสร็จแล้ว คุณสามารถเปิดโฟลเดอร์เพิ่มประสิทธิภาพได้

3. Google Closure Compiler

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

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

4. YUI คอมเพรสเซอร์

คอมเพรสเซอร์ YUI เป็นบรรทัดคำสั่ง JavaScript และเครื่องมือย่อขนาด CSS ที่รับประกันอัตราส่วนการบีบอัดที่สูงกว่าตัวอื่นๆ ส่วนใหญ่ เป็นเครื่องมือย่อขนาดที่เขียนด้วยภาษา Java และอาศัย Rhino เพื่อแปลงไฟล์ JavaScript ต้นทาง

ประการแรก YUI ตรวจสอบไฟล์ JavaScript ต้นทางเพื่อพิจารณาการสร้างไฟล์ จากนั้นจะพิมพ์สตรีมโทเค็นออกมา จากนั้นจะลบอักขระช่องว่างสีขาวให้มากที่สุดและแทนที่สัญลักษณ์ในเครื่องทั้งหมดด้วยสัญลักษณ์ตัวอักษร 1 (หรือ 2 หรือ 3)

เนื่องจาก YUI Compressor เป็นโอเพ่นซอร์ส คุณสามารถตรวจสอบซอร์สโค้ดเพื่อเรียนรู้วิธีการทำงาน นอกจากนี้ YUI ยังเป็นเครื่องมือย่อขนาด JavaScript ที่ปลอดภัยที่สุดด้วยอัตราส่วนการบีบอัดที่มีวาทศิลป์

5. UglifyJS

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

นอกจากนี้ยังสามารถรับไฟล์อินพุตหลายไฟล์พร้อมกัน โดยแยกวิเคราะห์ไฟล์อินพุตก่อน จากนั้นจึงแยกวิเคราะห์ตัวเลือก

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

วิธีย่อขนาด JavaScript โดยอัตโนมัติ: เครื่องมือออนไลน์ 5 อันดับแรก

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

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

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

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

1. ตัวย่อ JavaScript บนสุด

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

2. JSCompress

JSCompress สามารถลดขนาดและลดขนาด JavaScript ของคุณได้ถึง 80% มันมีอินเทอร์เฟซแบบคลิกแล้วไปที่เรียบง่าย ซึ่งคุณสามารถวางโค้ดของคุณหรืออัปโหลดไฟล์ .js ของคุณเพื่อลดขนาดได้ คุณจะได้รับเอาต์พุตที่ย่อเล็กสุดเป็นโค้ดที่สะอาดและคัดลอกได้ แทนที่จะเป็นไฟล์ . js โดยเฉพาะอย่างยิ่ง เครื่องมือนี้ใช้ UglifyJS และ Babel-minify เพื่อย่อขนาดและบีบอัด JavaScript

3. Minifier.org

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

4. TutorialsPoint Online JavaScript Minifier

คุณสามารถป้อนไฟล์ . js ระบุ URL หรือวางโค้ดดิบของคุณโดยตรงไปยังเครื่องมือตัวย่อ JavaScript ของ TutorialsPoint เครื่องมือนี้มีฟิลด์ที่สามารถแก้ไขได้เพื่อเขียนโค้ดโดยตรงหากคุณต้องการ นอกจากนี้ยังมีตัวเลือกการลดขนาดด้วยการคลิกเพียงครั้งเดียว และคุณสามารถดาวน์โหลดโค้ดย่อขนาดเป็นไฟล์ . js ได้

5. Packer: Dean Edwards JavaScript Compressor

หากคุณต้องการบีบอัดโค้ด JavaScript Packer by Dean Edwards สามารถมอบประสบการณ์การบีบอัด JavaScript ออนไลน์ที่น่าพึงพอใจที่สุดให้คุณได้ ทำงานร่วมกับโทเค็น/อะตอมของ JavaScript และรูปแบบบิตและไบต์

นอกจากนี้ยังช่วยให้คุณใช้ตัวเลือกการเข้ารหัส Base62 และตัวแปรย่อขนาดในขณะที่ย่อขนาดโค้ดของคุณ หากต้องการย่อโค้ด JS ของคุณ ให้คัดลอกและวางลงใน JavaScript แล้วกดปุ่มแพ็ค มันจะสร้างรหัสย่อให้คุณโดยอัตโนมัติ

วิธีย่อขนาด JavaScript ใน WordPress: เครื่องมือและปลั๊กอิน 5 อันดับแรก

การลดขนาด JavaScript เป็นไปตามขั้นตอนอื่นใน WordPress การลดขนาด JavaScript ต้องการการสนับสนุนโฮสต์หรือติดตั้งปลั๊กอิน WordPress หลังจากติดตั้งปลั๊กอินลดขนาด WordPress ปลั๊กอินจะดูแลกระบวนการย่อขนาดให้คุณ

มีปลั๊กอิน WordPress ย่อขนาด JavaScript จำนวนมาก ปลั๊กอินเหล่านี้ส่วนใหญ่ทำตามขั้นตอนเดียวกันในการลดขนาดและเรียกใช้ได้จากแดชบอร์ดของ WordPress

มาสำรวจเครื่องมือที่มีประสิทธิภาพที่สุดสำหรับการปรับเปลี่ยน JavaScript ใน WordPress:

1. การลดขนาดโค้ดใน MyKinsta

หากคุณเป็นลูกค้า Kinsta คุณสามารถใช้คุณลักษณะการลดขนาดโค้ดของเราเพื่อลดขนาดไฟล์ JS และ CSS ของไซต์ของคุณได้ สิ่งที่คุณต้องทำคือเปิดใช้งาน Kinsta CDN และทำเครื่องหมายสองช่องในแดชบอร์ด MyKinsta คุณไม่จำเป็นต้องติดตั้งปลั๊กอินของบุคคลที่สาม ไฟล์ของคุณจะถูกย่อให้เล็กสุด

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

2. W3 แคชทั้งหมด

W3 Total Cache ช่วยให้คุณสามารถย่อขนาด JavaScript, CSS และ HTML ด้วยการควบคุมที่ละเอียด นอกจากนี้ยังช่วยให้คุณสามารถย่อขนาดอินไลน์ ฝังตัว หรือ JavaScript หรือโค้ด CSS ของบุคคลที่สาม นอกจากนี้ยังชะลอ JavaScript และ CSS เพื่อการโหลดหน้าเว็บที่เร็วขึ้น นอกเหนือจากการลดขนาด นอกจากนี้ ปลั๊กอินยังเสนอโอกาสในการลดขนาด JavaScript หลายรายการสำหรับเว็บไซต์ WordPress

3. WP-เพิ่มประสิทธิภาพ

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

4. เพิ่มประสิทธิภาพอัตโนมัติ

Autoptimize เป็นปลั๊กอิน WordPress Minification ที่รวบรวม ลดขนาด และแคช CSS และ JavaScript ที่ไม่รวมกันเพื่อลดเวลาในการโหลดหน้าเว็บและปรับปรุงประสิทธิภาพของเว็บไซต์ของคุณ มันสามารถย่อขนาดและแคชสคริปต์, อินไลน์ JavaScript ที่สำคัญ, และ async JavaScript ที่ไม่ได้รวม

หากคุณกำลังรอคอยปลั๊กอิน WordPress JavaScript minification ซึ่งจะเน้นที่ประสิทธิภาพของเว็บไซต์ของคุณเป็นหลัก Autoptimize เป็นตัวเลือกที่ยอดเยี่ยม

5. การลดความเร็วที่รวดเร็ว

Fast Velocity Minify นำเสนอ JavaScript, CSS และ HTML minification ขั้นสูงสำหรับผู้ใช้ WordPress มันลดขนาดที่ส่วนหน้าเมื่อมีการร้องขอที่ไม่ได้แคชครั้งแรกเกิดขึ้น นอกจากนี้ ปลั๊กอินยังมีส่วนต่อประสานผู้ใช้ที่ตรงไปตรงมาและใช้งานง่าย

สรุป

การได้รับประสิทธิภาพสูงสุดจากหน้าเว็บของคุณต้องใส่ใจในรายละเอียดปลีกย่อย ดังนั้น การลดขนาด HTML, CSS และ JavaScript จะเข้าสู่รายการสิ่งที่ต้องทำด้านประสิทธิภาพของเว็บไซต์ของคุณ

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

เราพลาดเครื่องมือย่อขนาด JavaScript หรือปลั๊กอิน WordPress ที่คุณชอบหรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็น!