บริษัทรับจดทะเบียน เช่น npm มี ได้เปลี่ยนโลก JavaScript ให้ดีขึ้นโดยการทำให้ทุกคน ดาวน์โหลดและใช้แพ็กเกจสาธารณะกว่า 5 ล้านแพ็กเกจ แต่เรามักรวม ที่เรายังไม่ได้ใช้งานอย่างสมบูรณ์ หากต้องการแก้ไขปัญหานี้ ให้วิเคราะห์แพ็กเกจ เพื่อตรวจหาโค้ดที่ไม่ได้ใช้ แล้วนำไลบรารีที่ไม่ได้ใช้และที่ไม่จำเป็นออก
ผลกระทบต่อ Core Web Vitals
การนำโค้ดที่ไม่ได้ใช้ออก จะช่วยให้คุณปรับปรุงประสิทธิภาพ Core Web Vitals Largest Contentful Paint เช่น อาจได้รับผลกระทบจากโค้ดที่ไม่ได้ใช้งานเมื่อเนื้อหาขนาดใหญ่โดยไม่จำเป็น ช่วงชิงแบนด์วิดท์ด้วยทรัพยากรอื่น LCP อาจได้รับผลกระทบด้วยหากมีขนาดใหญ่ เนื้อหา JavaScript ที่แสดงมาร์กอัปเฉพาะในไคลเอ็นต์ มีการอ้างอิงถึงตัวเลือก LCP โดยเลื่อนเวลาโหลดทรัพยากรเหล่านี้ออกไป
โค้ดที่ไม่ได้ใช้ยังอาจส่งผลต่อการโต้ตอบกับ Next Paint (INP) ด้วย เพราะแม้แต่ JavaScript ที่ไม่ได้ใช้ก็ยังต้องดาวน์โหลด แยกวิเคราะห์ คอมไพล์ จากนั้น ดำเนินการแล้ว โค้ดที่ไม่ได้ใช้อาจทำให้เกิดความล่าช้าโดยไม่จำเป็นในการโหลดทรัพยากร เวลา การใช้งานหน่วยความจำ และกิจกรรมเทรดหลักที่ทำให้หน้าเว็บด้อยประสิทธิภาพ การตอบสนองอย่างรวดเร็ว
คู่มือนี้จะอธิบายวิธีวิเคราะห์ฐานของโค้ดของโปรเจ็กต์เพื่อหาโค้ดที่ไม่ได้ใช้ มีกลยุทธ์ในการตัดโค้ดที่ไม่ได้ใช้จากเนื้อหา JavaScript ที่คุณส่ง ผู้ใช้เวอร์ชันที่ใช้งานจริง
วิเคราะห์แพ็กเกจของคุณ
เครื่องมือสำหรับนักพัฒนาเว็บสามารถแสดงขนาดของคำขอเครือข่ายทั้งหมดให้คุณทราบ
- กด "Control Shift J" (หรือ "Command Option J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บเครือข่าย
- เลือกช่องทำเครื่องหมายปิดใช้แคช
- โหลดหน้าเว็บซ้ำ
แท็บความครอบคลุมใน นอกจากนี้ เครื่องมือสำหรับนักพัฒนาเว็บยังแจ้งให้คุณทราบจำนวนโค้ด CSS และ JS ในแอปพลิเคชันที่ไม่ได้ใช้งาน
เมื่อระบุการกำหนดค่า Lighthouse เต็มรูปแบบผ่าน CLI ของโหนด คุณจะเรียกใช้ได้ ลดการตรวจสอบ JavaScript ที่ไม่ได้ใช้เพื่อติดตามว่าโค้ดที่ไม่มีการใช้งานถูกจัดส่งไปมากน้อยเพียงใด กับแอปพลิเคชันของคุณ
หากใช้ webpack เป็น Bundler เครื่องมือวิเคราะห์ Webpack Bundle สามารถช่วยตรวจสอบองค์ประกอบของแพ็กเกจได้ เพิ่มปลั๊กอินใน ไฟล์การกำหนดค่า Webpack เช่นเดียวกับปลั๊กอินอื่นๆ
module.exports = {
//...
plugins: [
//...
new BundleAnalyzerPlugin()
]
}
แม้ว่า Webpack นั้นมักใช้ในการสร้างแอปพลิเคชันหน้าเว็บเดียว แต่ Bundler เช่น พัสดุ และ ภาพรวมยังมีเครื่องมือแสดงข้อมูลเป็นภาพ สามารถใช้เพื่อวิเคราะห์แพ็กเกจของคุณได้
การโหลดแอปพลิเคชันที่มีปลั๊กอินนี้ซ้ำจะแสดงแผนผังต้นไม้ที่ซูมได้ของ ทั้งแพ็กเกจ
ภาพนี้แสดงให้เห็นว่าส่วนใดของแพ็กเกจที่ใหญ่กว่า อื่นๆ และเพื่อให้คุณเข้าใจจำนวนและขนาดของห้องสมุดได้ดีขึ้น การนำเข้าแอปพลิเคชัน วิธีนี้จะช่วยระบุได้ว่าคุณกำลังใช้ หรือไลบรารีที่ไม่จำเป็น
นำไลบรารีที่ไม่ได้ใช้ออก
ในรูปภาพทรีแม็ปก่อนหน้านี้ มีแพ็กเกจอยู่หลายรายการภายใน
@firebase หากเว็บไซต์ต้องการเฉพาะคอมโพเนนต์ฐานข้อมูล Firebase
อัปเดตการนำเข้าเพื่อดึงข้อมูลไลบรารีนั้น
import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';
สำหรับแพ็กเกจที่ดูลึกลับที่คุณแน่ใจว่าไม่ได้ใช้งานอยู่ ย้อนกลับไปที่จุดใดก็ได้ เพื่อดูว่าทรัพยากร Dependency ระดับบนสุดใด อยู่แล้ว ลองหาวิธีนำเข้าเฉพาะคอมโพเนนต์ที่คุณต้องการจากคอมโพเนนต์ดังกล่าว หากไม่ได้ใช้ไลบรารี ให้นำไลบรารีออก หากไม่จำเป็นต้องมีไลบรารีสำหรับองค์ประกอบ การโหลดหน้าเว็บเริ่มต้น ลองใช้การโหลดแบบ Lazy Loading ได้
ถ้าคุณกำลังใช้ Webpack โปรดดูรายการปลั๊กอินที่จะ นำโค้ดที่ไม่ได้ใช้ออกจากไลบรารียอดนิยม
นำไลบรารีที่ไม่จำเป็นออก
ไลบรารีบางประเภทสามารถแยกออกเป็นส่วนๆ และคัดเลือกบางรายการได้ ในสถานการณ์เช่นนี้ ให้พิจารณาว่าคุณจะนำทั้งคลังออกได้หรือไม่ การสร้างโซลูชันที่กำหนดเองหรือการใช้ประโยชน์จากทางเลือกที่ง่ายกว่าควรทำเสมอ ตัวเลือกที่ควรพิจารณา อย่างไรก็ตาม สิ่งสำคัญคือการชั่งน้ำหนักระหว่างความซับซ้อนและ ความพยายามที่จำเป็นสำหรับกลยุทธ์เหล่านี้ ก่อนที่จะนำคลังออก จากแอปของคุณได้โดยสมบูรณ์