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

Houssein Djirdeh

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

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

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

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

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

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

เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงขนาดของคำขอเครือข่ายทั้งหมดดังนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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