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

Houssein Djirdeh

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

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

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

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

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

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

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

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

เครื่องมือสำหรับนักพัฒนาเว็บที่แสดงขนาดไฟล์ JavaScript

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

แท็บ "การครอบคลุม"

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

ลดรายงาน JavaScript ที่ไม่ได้ใช้งาน

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

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

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

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

มุมมองแบบต้นไม้ของ Webpack Bundle Analysisr

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

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

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

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

หมายเหตุ: กระบวนการนี้มีความซับซ้อนมากกว่าสำหรับแอปขนาดใหญ่

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

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

ลองทำดู: นำโค้ดที่ไม่ได้ใช้ออก

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

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