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

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

ผลกระทบต่อ 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

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

วันที่ การครอบคลุมโค้ดในเครื่องมือสำหรับนักพัฒนาเว็บ
แท็บความครอบคลุม

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

วันที่ รายงาน JavaScript ที่ไม่ได้ใช้ของ Lighthouse Reduce
ลดรายงาน JavaScript ที่ไม่ได้ใช้

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

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

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

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

วันที่ เครื่องมือวิเคราะห์ Bundle ของ Webpack
มุมมองแผนผังของ Webpack Bundle analyticsr

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

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

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

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

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

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

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

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