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

Milica Mihajlija

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bundlesize

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

Bundlesize CLI

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

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

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

Bundlesize สำหรับ CI

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

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

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

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

บ็อต Lighthouse

Lighthouse Bot ผสานรวมกับ Travis CI และบังคับใช้งบประมาณตามหมวดหมู่การตรวจสอบ Lighthouse 5 หมวดหมู่ เช่น งบประมาณ 100 สําหรับคะแนนประสิทธิภาพของ 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 Bot จะแสดงความคิดเห็นในคำขอดึงข้อมูลพร้อมคะแนนที่อัปเดต ฟีเจอร์นี้มีประโยชน์มากในการกระตุ้นการสนทนาเกี่ยวกับประสิทธิภาพขณะที่มีการเปลี่ยนแปลงโค้ด

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

สรุป