รวมงบประมาณด้านประสิทธิภาพในกระบวนการสร้างของคุณ

เมื่อกําหนดงบประมาณด้านประสิทธิภาพแล้ว ก็ถึงเวลาตั้งค่ากระบวนการสร้างเพื่อติดตามงบประมาณ มีเครื่องมือหลายอย่างที่ให้คุณกําหนดเกณฑ์สําหรับเมตริกประสิทธิภาพที่เลือก และเตือนคุณหากใช้จ่ายเกินงบประมาณ ดูวิธีเลือกรูปแบบที่เหมาะกับความต้องการและการตั้งค่าปัจจุบันของคุณมากที่สุด 🕵️‍♀️

Lighthouse เป็นเครื่องมือตรวจสอบที่ทดสอบเว็บไซต์ในประเด็นหลักๆ 2-3 ด้าน ได้แก่ ประสิทธิภาพ การช่วยเหลือพิเศษ แนวทางปฏิบัติแนะนำ และประสิทธิภาพของเว็บไซต์ในฐานะ Progressive Web App

Lighthouse (v5+) เวอร์ชันบรรทัดคำสั่งรองรับการตั้งค่างบประมาณด้านประสิทธิภาพตามสิ่งต่อไปนี้

  • ขนาดทรัพยากร
  • จํานวนทรัพยากร

คุณตั้งงบประมาณสำหรับทรัพยากรประเภทใดก็ได้ต่อไปนี้

  • document
  • font
  • image
  • media
  • other
  • script
  • stylesheet
  • third-party
  • total

งบประมาณจะตั้งค่าไว้ในไฟล์ JSON และหลังจากกําหนดแล้ว คอลัมน์ "เกินงบประมาณ" ใหม่จะแจ้งให้คุณทราบว่าคุณใช้จ่ายเกินขีดจํากัดหรือไม่

ส่วนงบประมาณในรายงาน Lighthouse
ส่วน "งบประมาณ" ในรายงาน Lighthouse

คำแนะนำด้านประสิทธิภาพของ Webpack

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

เปิดคำแนะนำด้านประสิทธิภาพใน webpack.config.js เพื่อดูคำเตือนหรือข้อผิดพลาดเกี่ยวกับบรรทัดคำสั่งเมื่อขนาดแพ็กเกจเกินขีดจำกัด ซึ่งวิธีนี้ช่วยให้คุณคำนึงถึงขนาดชิ้นงานได้ตลอดการพัฒนา

หลังจากขั้นตอนการสร้าง webpack จะแสดงรายการชิ้นงานและขนาดของชิ้นงานที่มีรหัสสี รายการที่เกินงบประมาณจะไฮไลต์เป็นสีเหลือง

เอาต์พุต Webpack ที่ไฮไลต์ bundle.js
bundle.js ที่ไฮไลต์มีขนาดใหญ่กว่างบประมาณของคุณ

ขีดจํากัดเริ่มต้นสําหรับทั้งชิ้นงานและจุดแรกเข้าคือ 250 KB คุณตั้งเป้าหมายของคุณเองได้ในไฟล์การกําหนดค่า

คำเตือนเกี่ยวกับขนาดกลุ่มของ Webpack
คำเตือนเกี่ยวกับขนาดกลุ่มของ Webpack ⚠️

ระบบจะเปรียบเทียบงบประมาณกับขนาดชิ้นงานที่ไม่มีการบีบอัด ขนาด JavaScript ที่ไม่ได้บีบอัดจะเกี่ยวข้องกับเวลาในการเรียกใช้ และไฟล์ขนาดใหญ่อาจใช้เวลานานในการเรียกใช้ โดยเฉพาะในอุปกรณ์เคลื่อนที่

คําแนะนําในการเพิ่มประสิทธิภาพ Webpack
ฟีเจอร์พิเศษ: webpack ไม่เพียงเตือนคุณเท่านั้น แต่ยังให้คำแนะนำเกี่ยวกับวิธีลดขนาดกลุ่ม 💁

Bundlesize

Bundlesize เป็นแพ็กเกจ npm ง่ายๆ ที่ทดสอบขนาดชิ้นงานเทียบกับเกณฑ์ที่คุณตั้งไว้ โดยสามารถทํางานในเครื่องและผสานรวมกับ CI ได้

Bundlesize CLI

เรียกใช้ bundlesize CLI โดยระบุเกณฑ์และไฟล์ที่ต้องการทดสอบ

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize จะแสดงผลลัพธ์การทดสอบที่เข้ารหัสสีในบรรทัดเดียว

การทดสอบ bundlesize ใน CLI ไม่ผ่าน
ทดสอบ bundlesize CLI ไม่ผ่าน ❌
ผ่านการทดสอบ CLI ของขนาดกลุ่ม
ทดสอบ bundlesize CLI ผ่าน ✔️

Bundlesize สำหรับ CI

คุณจะได้รับประโยชน์สูงสุดจาก bundlesize หากผสานรวมกับ CI เพื่อบังคับใช้ขีดจำกัดขนาดในคำขอดึงโดยอัตโนมัติ หากการทดสอบขนาดแพ็กเกจไม่สำเร็จ ระบบจะไม่ผสานคําขอดึงข้อมูลนั้น ซึ่งใช้ได้กับคำขอพุลใน GitHub ที่มี Travis CI, CircleCI, Wercker และ Drone

สถานะการตรวจสอบขนาดแพ็กเกจใน GitHub
สถานะการตรวจสอบขนาดแพ็กเกจใน GitHub

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

เมื่อใช้ bundlesize คุณจะกำหนดเกณฑ์สำหรับแต่ละไฟล์แยกกันได้ ซึ่งจะเป็นประโยชน์อย่างยิ่งหากคุณกำลังแยกกลุ่มในแอปพลิเคชัน

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

บ็อต Lighthouse

บ็อต Lighthouse

Lighthouse Bot ผสานรวมกับ Travis CI และบังคับใช้งบประมาณตามหมวดหมู่การตรวจสอบ Lighthouse 5 หมวดหมู่ เช่น งบประมาณ 100 สําหรับคะแนนประสิทธิภาพของ Lighthouse บางครั้งการติดตามตัวเลขเพียงอย่างเดียวอาจง่ายกว่าการติดตามงบประมาณของชิ้นงานแต่ละรายการ และคะแนน Lighthouse จะพิจารณาหลายสิ่ง

คะแนน Lighthouse 💯
คะแนน Lighthouse 💯

Lighthouse Bot จะเรียกใช้การตรวจสอบหลังจากที่คุณติดตั้งใช้งานเว็บไซต์ในเซิร์ฟเวอร์ที่ใช้ทดสอบ ใน .travis.yml ให้ตั้งงบประมาณสำหรับหมวดหมู่ Lighthouse บางหมวดหมู่ด้วยตัวเลือก --perf, --a11y, --bp, --seo หรือ --pwa พยายามอยู่ในโซนสีเขียวโดยได้คะแนนอย่างน้อย 90

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

หากคะแนนของคำขอพุลใน GitHub ต่ำกว่าเกณฑ์ที่คุณตั้งไว้ Lighthouse Bot จะป้องกันไม่ให้ผสานคำขอพุลได้

สถานะการตรวจสอบของบ็อต Lighthouse ใน GitHub
สถานะการตรวจสอบของบ็อต Lighthouse ใน GitHub

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

คะแนนการรายงาน Lighthouse ในคำขอดึง
คะแนนการรายงาน Lighthouse ในคำขอดึงข้อมูล 💬

หากพบว่าคําขอดึงข้อมูลถูกบล็อกเนื่องจากคะแนน Lighthouse ต่ำ ให้เรียกใช้การตรวจสอบด้วย Lighthouse CLI หรือใน Dev Tools ซึ่งจะสร้างรายงานที่มีรายละเอียดเกี่ยวกับปัญหาคอขวดและคำแนะนำสําหรับการเพิ่มประสิทธิภาพง่ายๆ

สรุป

เครื่องมือ CLI CI สรุป
ประภาคาร ✔️
  • งบประมาณสำหรับทรัพยากรประเภทต่างๆ ตามขนาดหรือจำนวน
webpack ✔️
  • งบประมาณตามขนาดของชิ้นงานที่ webpack สร้างขึ้น
  • ตรวจสอบขนาดที่ไม่ได้บีบอัด
bundlesize ✔️ ✔️
  • งบประมาณตามขนาดของทรัพยากรที่เฉพาะเจาะจง
  • ตรวจสอบขนาดที่บีบอัดหรือไม่บีบอัด
บ็อต Lighthouse ✔️
  • งบประมาณตามคะแนน Lighthouse