Lighthouse ของ Google กำลังแนะนำไลบรารี JavaScript ทางเลือกแทน

เผยแพร่แล้ว: 2021-01-06

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

อย่างไรก็ตาม จนถึงเดือนกันยายน Google ไม่ได้เรียกใช้ไลบรารี JavaScript ด้วยตนเอง

และตอนนี้ คำเตือนได้เลื่อนระดับให้ปรากฏใน Page Speed ​​Insights แล้ว

คำเกี่ยวกับ JavaScript

ในโลกของ JavaScript แบบโอเพนซอร์ส นักพัฒนาจะยืนอยู่บนไหล่ของนักพัฒนาที่มาก่อนพวกเขา โดยเฉพาะอย่างยิ่งผู้ที่แก้ไขบางสิ่งที่มิฉะนั้นจะต้องได้รับการแก้ไขโดยผู้เขียนไลบรารีใหม่ ระบบบรรจุภัณฑ์ JavaScript ที่แพร่หลาย NPM (Node Package Manager) ทำให้การรวมไลบรารีที่มีอยู่ก่อนหน้าในโครงการของคุณง่ายขึ้น ที่จุดเริ่มต้น โปรเจ็กต์ JavaScript ที่กำหนดจะเป็นส่วนเล็กๆ ของภูเขาน้ำแข็งที่สร้างด้วย JavaScript อื่นๆ ที่อยู่ข้างใต้ ซึ่งมักจะจัดเก็บโดย NPM ในไดเร็กทอรี . .node_modules

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

เกี่ยวกับกรอบงาน

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

$ npx create-react-app my-app

การเรียกใช้คำสั่งข้างต้นจะสร้างไดเร็กทอรี "my-app" และวางแผนผังไดเร็กทอรีแอป React ทั้งหมดลงในไดเร็กทอรี พร้อมด้วยไฟล์ที่จำเป็นและการพึ่งพาไลบรารีทั้งหมด การเพิ่มประสิทธิภาพบันเดิลการผลิตของคุณ ซึ่งสามารถมีโค้ดจากไลบรารี Javascript หลายไลบรารี อาจเป็นเหตุผลที่สำคัญที่สุดที่แพ็คเกจเฟรมเวิร์กสมัยใหม่มีเครื่องมือและขั้นตอนต่างๆ ในการกำจัดบล็อกโค้ดที่ไม่ได้ใช้ และลดเอาต์พุตสำหรับการผลิตให้เหลือน้อยที่สุด

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

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

MomentJS

ห้องสมุดที่มีชื่อเสียงอย่าง MomentJS (ที่มีการดาวน์โหลด 12 ล้านครั้งต่อสัปดาห์ ณ เดือนกันยายน 2020) เป็นห้องสมุดแห่งแรกที่ Lighthouse ชี้ให้เห็นว่ามีตัวเลือกที่ดีกว่าสองสามทาง ตรรกะของ Google ที่นี่ไม่สามารถหักล้างได้และเป็นที่รู้จักกันดี เพื่อเป็นการตอบโต้ ขณะนี้หน้าแรกและเอกสารของ Moment สะท้อนคำแนะนำที่ให้ไว้ในการรายงานของ Lighthouse ฟีเจอร์ Moment ถูกระงับ โดยมีเพียงการอัปเดตความเสถียรที่วางแผนไว้

ไลบรารีอื่น ๆ ที่ Google มีภายใต้กล้องจุลทรรศน์คือ Lodash และอาจเป็นขีดล่าง มีการแสดงความรู้สึกเชิงลบที่ถูกต้องตามกฎหมายเกี่ยวกับเรื่องนี้ในชุมชนนักพัฒนาซอฟต์แวร์ โดยมีนักพัฒนามากกว่าหนึ่งรายเรียกสิ่งนี้ว่า "เป็นพิษ" หรือ "เป็นอันตราย" ต่อชุมชนโอเพนซอร์ซ การร้องเรียนเกี่ยวข้องกับห้องสมุด "ที่น่าอับอาย" ของ Google โดยไม่ให้บริบทเพียงพอและส่งเสริมทางเลือกอื่นที่อาจเป็นอันตรายต่อการค้นพบทางเลือกห้องสมุดที่มีขนาดเล็กกว่าและไม่ค่อยมีใครรู้จัก

แม้ว่าทั้งหมดนั้นจะเป็นเรื่องจริง แต่ก็เป็นความจริงเช่นกันว่าคุณต้องทำลายไข่เพื่อทำออมเล็ต ความก้าวหน้ามักจะทำร้ายบางคน Google อาศัยข้อมูลอ้างอิงของบุคคลที่สาม (BundlePhobia) ในการรวบรวมรายการไลบรารีสำรอง พวกเขาตรวจสอบทางเลือกเพิ่มเติมโดยพิจารณาจาก "มาตรฐานระดับสูงสำหรับความเท่าเทียมกัน" และ "ความง่ายในการย้ายถิ่น" ตามที่ทีม Lighthouse กำหนด

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

สิ่งนี้มีความหมายสำหรับ TechSEOs

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

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

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

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

รูปแบบที่ทันสมัยซึ่งอาศัย Objects ที่ไม่เปลี่ยนรูปจากไลบรารีที่ใหม่กว่านั้นมีเสถียรภาพมากกว่า ในการไปถึงที่นั่น อาจต้องเขียนใหม่ทุกครั้งที่มีการใช้ Moment

SEO สำหรับนักพัฒนา

การเพิ่มประสิทธิภาพ JavaScript สำหรับการผลิตเป็นงานเป็นสิ่งสำคัญมากใน wheelhouse ของ TechSEO ที่ทำงานเกี่ยวกับโค้ด หรือการให้ข้อเสนอแนะแก่นักพัฒนาที่อาจไม่คุ้นเคยกับ SEO เนื่องจากนักพัฒนาควรเข้าใจการเพิ่มประสิทธิภาพในตอนแรก ไม่สามารถสันนิษฐานได้ว่านักพัฒนาซอฟต์แวร์รู้เกี่ยวกับ BundlePhobia, Lighthouse หรือ SEO สำหรับเรื่องนั้น

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