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

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

งบประมาณด้านประสิทธิภาพของ Lighthouse

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

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

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

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

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

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

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

คำแนะนำเกี่ยวกับประสิทธิภาพ Webpack

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

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

หลังจากขั้นตอนการสร้าง Webpack จะแสดงรายการเนื้อหาแยกตามสีและขนาดของเนื้อหา ทุกอย่างที่เกินงบประมาณจะถูกไฮไลต์ด้วยสีเหลือง

เอาต์พุต Webpack ที่ไฮไลต์แพ็กเกจ.js
bundle.js ที่ไฮไลต์มากกว่างบประมาณของคุณ

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

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

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

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

ขนาดกลุ่ม

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

CLI ขนาดกลุ่ม

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

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

Bundlesize แสดงผลลัพธ์การทดสอบที่มีโค้ดสีใน 1 บรรทัด

การทดสอบ CLI สำหรับ Bundlesize ไม่สำเร็จ
การทดสอบ CLI สำหรับ Bundlesize ไม่สำเร็จ ❌
ผ่านการทดสอบ CLI ขนาด Bundle
การทดสอบ CLI ผ่าน Bundlesize ✔️

ขนาดกลุ่มสำหรับ CI

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

สถานะการตรวจสอบขนาด Bundle ใน GitHub
สถานะการตรวจสอบขนาด Bundle ใน GitHub

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

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

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

บ็อต Lighthouse

บ็อต Lighthouse

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

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

บ็อต Lighthouse จะทำการตรวจสอบหลังจากที่คุณทำให้เว็บไซต์ใช้งานได้ในเซิร์ฟเวอร์ทดลองใช้ ใน .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 จะป้องกันไม่ให้รวมคำขอพุลได้

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

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

คะแนนการรายงานของ Lighthouse เกี่ยวกับคำขอพุล
คะแนนการรายงานของ Lighthouse เกี่ยวกับคำขอพุล 💬

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

สรุป

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