ลบโค้ดที่ไม่ได้ใช้

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

ฮูสเซน จอร์เดห์

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

ผลกระทบต่อ Core Web Vitals

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

เมตริกอื่นๆ เช่น First Input Delay (FID) และ Interaction to Next Paint (INP) อาจได้รับผลกระทบจากโค้ดที่ไม่ได้ใช้ด้วย เนื่องจากแม้แต่ JavaScript ที่ไม่ได้ใช้ก็ต้องดาวน์โหลด แยกวิเคราะห์ คอมไพล์ แล้วเรียกใช้ โค้ดที่ไม่มีการใช้งานอาจทําให้เกิดความล่าช้าโดยไม่จำเป็นเกี่ยวกับเวลาในการโหลดทรัพยากร การใช้งานหน่วยความจำ และกิจกรรมเทรดหลักซึ่งทำให้การตอบสนองของหน้าเว็บไม่ดี

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

วิเคราะห์แพ็กเกจ

เครื่องมือสำหรับนักพัฒนาเว็บช่วยให้ดูขนาดของคำขอของเครือข่ายทั้งหมดได้อย่างง่ายดาย

1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกแท็บเครือข่าย
3. เลือกช่องทำเครื่องหมายปิดใช้แคช
4. โหลดหน้าเว็บซ้ำ

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

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

หากใช้ Webpack เป็นไฟล์ Bundler Webpack Bundle วิเคราะห์จะช่วยคุณตรวจสอบองค์ประกอบของชุดซอฟต์แวร์ดังกล่าว ใส่ปลั๊กอินในไฟล์การกำหนดค่า Webpack เช่นเดียวกับปลั๊กอินอื่นๆ

module.exports = {
  //...
  plugins: [
    //...
    new BundleAnalyzerPlugin()
  ]
}

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

การโหลดแอปพลิเคชันซ้ำที่มีปลั๊กอินนี้อยู่จะแสดงแผนผังต้นไม้ที่ซูมได้ของทั้งแพ็กเกจ

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

นำไลบรารีที่ไม่ได้ใช้ออก

ในรูปภาพทรีแม็ปก่อนหน้านี้ มีแพ็กเกจอยู่ 2-3 แพ็กเกจภายในโดเมน @firebase โดเมนเดียว หากเว็บไซต์ต้องใช้คอมโพเนนต์ฐานข้อมูล Firebase เท่านั้น ให้อัปเดตการนำเข้าเพื่อดึงข้อมูลไลบรารีนั้น

import firebase from 'firebase';
import firebase from 'firebase/app';
import 'firebase/database';

สิ่งสำคัญคือต้องเน้นย้ำว่ากระบวนการนี้จะซับซ้อนกว่ามากสำหรับแอปพลิเคชันขนาดใหญ่

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

และในกรณีที่คุณใช้ Webpack โปรดดูรายการปลั๊กอินที่นำโค้ดที่ไม่ได้ใช้ออกจากไลบรารียอดนิยมโดยอัตโนมัติ

นำไลบรารีที่ไม่จำเป็นออก

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