เมื่อคุณกำหนดงบประมาณด้านประสิทธิภาพแล้ว ก็ถึงเวลาตั้งค่ากระบวนการสร้างเพื่อติดตามดู มีเครื่องมือหลายอย่างที่ให้คุณกำหนดเกณฑ์สำหรับเมตริกประสิทธิภาพที่เลือกและเตือนคุณหากใช้งบประมาณเกิน ดูวิธีเลือกวิธีที่เหมาะกับความต้องการและการตั้งค่าปัจจุบันมากที่สุด 🕵️ ♀️
งบประมาณด้านประสิทธิภาพของ Lighthouse
Lighthouse คือเครื่องมือตรวจสอบที่จะทดสอบเว็บไซต์ในไม่กี่ด้าน ได้แก่ ประสิทธิภาพ การช่วยเหลือพิเศษ แนวทางปฏิบัติแนะนำ และประสิทธิภาพของเว็บไซต์ในฐานะ Progressive Web Application
เวอร์ชันบรรทัดคำสั่งของ Lighthouse (v5+) รองรับการตั้งค่างบประมาณด้านประสิทธิภาพตามข้อมูลต่อไปนี้
- ขนาดทรัพยากร
- จำนวนทรัพยากร
คุณกำหนดงบประมาณสำหรับทรัพยากรประเภทใดก็ได้ต่อไปนี้
document
font
image
media
other
script
stylesheet
third-party
total
จะมีการตั้งงบประมาณในไฟล์ JSON และหลังจากกำหนดงบประมาณแล้ว คอลัมน์ "เกินงบประมาณ" ใหม่จะบอกคุณว่าคุณใช้จ่ายเกินวงเงินหรือไม่
คำแนะนำเกี่ยวกับประสิทธิภาพ Webpack
Webpack เป็นเครื่องมือบิลด์ที่มีประสิทธิภาพในการเพิ่มประสิทธิภาพวิธีแสดงโค้ดแก่ผู้ใช้ ทั้งยังรองรับการตั้งงบประมาณประสิทธิภาพตามขนาดของชิ้นงานด้วย
เปิดคำแนะนำด้านประสิทธิภาพใน webpack.config.js
เพื่อรับการแจ้งเตือนหรือข้อผิดพลาดเกี่ยวกับบรรทัดคำสั่งเมื่อขนาดกลุ่มเพิ่มขึ้นเกินขีดจำกัด นี่เป็นวิธีที่ยอดเยี่ยมในการตระหนักถึงขนาดชิ้นงานตลอดการพัฒนา
หลังจากขั้นตอนการสร้าง Webpack จะแสดงรายการเนื้อหาแยกตามสีและขนาดของเนื้อหา ทุกอย่างที่เกินงบประมาณจะถูกไฮไลต์ด้วยสีเหลือง
ขีดจำกัดเริ่มต้นสำหรับทั้งเนื้อหาและจุดแรกเข้าคือ 250 KB คุณสามารถตั้งเป้าหมายของคุณเองในไฟล์การกำหนดค่า
งบประมาณจะนำไปเปรียบเทียบกับขนาดของชิ้นงานที่ไม่ได้บีบอัด ขนาด JavaScript ที่ไม่ได้บีบอัดเกี่ยวข้องกับเวลาในการดำเนินการกับ และไฟล์ขนาดใหญ่อาจใช้เวลานานในการเรียกใช้ โดยเฉพาะบนอุปกรณ์เคลื่อนที่
ขนาดกลุ่ม
Bundlesize เป็นแพ็กเกจ npm แบบง่ายที่จะทดสอบขนาดของชิ้นงานกับเกณฑ์ที่คุณตั้งค่าไว้ ซึ่งสามารถทำงานได้ในเครื่องและผสานรวมกับ CI ของคุณ
CLI ขนาดกลุ่ม
เรียกใช้ bundlesize CLI โดยระบุเกณฑ์และไฟล์ที่ต้องการทดสอบ
bundlesize -f "dist/bundle.js" -s 170kB
Bundlesize แสดงผลลัพธ์การทดสอบที่มีโค้ดสีใน 1 บรรทัด
ขนาดกลุ่มสำหรับ CI
คุณจะได้รับประโยชน์สูงสุดจาก Bundlesize หากผสานรวมกับ CI เพื่อบังคับใช้ขีดจำกัดขนาดสำหรับคำขอพุลโดยอัตโนมัติ หากการทดสอบ Bundlesize ไม่สำเร็จ ระบบจะไม่รวมคำขอพุลนั้น โดยใช้งานได้กับคำขอพุลบน GitHub กับ Travis CI, CircleCI, Wercker และ Drone
คุณอาจมีแอปที่ทำงานเร็วอยู่แล้ว แต่การเพิ่มรหัสใหม่อาจเปลี่ยนแปลงได้บ่อยครั้ง การตรวจสอบพุลคำขอที่มี Bundlesize จะช่วยให้คุณหลีกเลี่ยงการถดถอยด้านประสิทธิภาพ Bootstrap, Tinder, Trivago และอีกหลายๆ แหล่งใช้เครื่องมือนี้ในการตรวจสอบงบประมาณ
Bundlesize ช่วยให้คุณกำหนดเกณฑ์สำหรับแต่ละไฟล์แยกกันได้ ซึ่งจะเป็นประโยชน์อย่างยิ่งหากคุณแยกแพ็กเกจในแอปพลิเคชันของคุณ
โดยค่าเริ่มต้น จะทดสอบขนาดของชิ้นงานที่บีบอัด คุณอาจใช้ตัวเลือกการบีบอัดเพื่อเปลี่ยนไปใช้การบีบอัดโบรทลี หรือปิดไปเลยก็ได้
บ็อต Lighthouse
Lighthouse Bot ผสานรวมกับ Travis CI และบังคับใช้นโยบายตามการตรวจสอบ Lighthouse จาก 5 หมวดหมู่ของ Lighthouse เช่น งบประมาณ 100 สำหรับคะแนนประสิทธิภาพของ 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 Bot จะแสดงความคิดเห็นในคำขอพุลของคุณด้วยคะแนนที่อัปเดต นี่เป็นคุณลักษณะที่เป็นระเบียบ ซึ่งกระตุ้นให้เกิดการสนทนาเกี่ยวกับประสิทธิภาพเมื่อมีการเปลี่ยนแปลงโค้ดเกิดขึ้น
หากพบว่าคำขอพุลของคุณถูกบล็อกโดยคะแนน Lighthouse ต่ำ ให้ดำเนินการตรวจสอบด้วย Lighthouse CLI หรือในเครื่องมือสำหรับนักพัฒนาเว็บ สร้างรายงานที่มีรายละเอียดเกี่ยวกับจุดคอขวดและคำแนะนำในการเพิ่มประสิทธิภาพที่ง่ายดาย
สรุป
เครื่องมือ | CLI | CI | สรุป |
---|---|---|---|
ประภาคาร | ✔️ | ❌ |
|
Webpack | ✔️ | ❌ |
|
ขนาดกลุ่ม | ✔️ | ✔️ |
|
บ็อต Lighthouse | ❌ | ✔️ |
|