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

Houssein Djirdeh

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

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

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

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

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

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

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

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

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

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

แท็บความครอบคลุม

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

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

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

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

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

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

มุมมอง Treemap ของ Webpack Bundle Analyzer

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

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

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

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

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

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

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

ลองทำดังนี้ นำรหัสที่ไม่ได้ใช้ออก

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

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