เมื่อคุณกำหนดงบประมาณด้านประสิทธิภาพแล้ว ก็ถึงเวลาตั้งค่ากระบวนการสร้างเพื่อติดตามดู มีเครื่องมือหลายอย่างที่ให้คุณกำหนดเกณฑ์สำหรับเมตริกประสิทธิภาพที่เลือกและเตือนคุณหากใช้งบประมาณเกิน ดูวิธีเลือกวิธีที่เหมาะกับความต้องการและการตั้งค่าปัจจุบันมากที่สุด 🕵️ ♀️
งบประมาณด้านประสิทธิภาพของ Lighthouse
Lighthouse คือเครื่องมือตรวจสอบที่จะทดสอบเว็บไซต์ในไม่กี่ด้าน ได้แก่ ประสิทธิภาพ การช่วยเหลือพิเศษ แนวทางปฏิบัติแนะนำ และประสิทธิภาพของเว็บไซต์ในฐานะ Progressive Web Application
เวอร์ชันบรรทัดคำสั่งของ Lighthouse (v5+) รองรับการตั้งค่างบประมาณด้านประสิทธิภาพตามข้อมูลต่อไปนี้
- ขนาดทรัพยากร
- จำนวนทรัพยากร
คุณกำหนดงบประมาณสำหรับทรัพยากรประเภทใดก็ได้ต่อไปนี้
document
font
image
media
other
script
stylesheet
third-party
total
จะมีการตั้งงบประมาณในไฟล์ JSON และหลังจากกำหนดงบประมาณแล้ว คอลัมน์ "เกินงบประมาณ" ใหม่จะบอกคุณว่าคุณใช้จ่ายเกินวงเงินหรือไม่
![ส่วนงบประมาณในรายงาน Lighthouse](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/budgets-section-lighthou-1f943ff9e538d.png?hl=th)
คำแนะนำเกี่ยวกับประสิทธิภาพ Webpack
Webpack เป็นเครื่องมือบิลด์ที่มีประสิทธิภาพในการเพิ่มประสิทธิภาพวิธีแสดงโค้ดแก่ผู้ใช้ ทั้งยังรองรับการตั้งงบประมาณประสิทธิภาพตามขนาดของชิ้นงานด้วย
เปิดคำแนะนำด้านประสิทธิภาพใน webpack.config.js
เพื่อรับการแจ้งเตือนหรือข้อผิดพลาดเกี่ยวกับบรรทัดคำสั่งเมื่อขนาดกลุ่มเพิ่มขึ้นเกินขีดจำกัด นี่เป็นวิธีที่ยอดเยี่ยมในการตระหนักถึงขนาดชิ้นงานตลอดการพัฒนา
หลังจากขั้นตอนการสร้าง Webpack จะแสดงรายการเนื้อหาแยกตามสีและขนาดของเนื้อหา ทุกอย่างที่เกินงบประมาณจะถูกไฮไลต์ด้วยสีเหลือง
![เอาต์พุต Webpack ที่ไฮไลต์แพ็กเกจ.js](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-output-highlighti-b33963dc70391.png?hl=th)
ขีดจำกัดเริ่มต้นสำหรับทั้งเนื้อหาและจุดแรกเข้าคือ 250 KB คุณสามารถตั้งเป้าหมายของคุณเองในไฟล์การกำหนดค่า
![คำเตือนเกี่ยวกับขนาดกลุ่ม Webpack](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-bundle-size-warni-412c8dae0aeea.jpg?hl=th)
งบประมาณจะนำไปเปรียบเทียบกับขนาดของชิ้นงานที่ไม่ได้บีบอัด ขนาด JavaScript ที่ไม่ได้บีบอัดเกี่ยวข้องกับเวลาในการดำเนินการกับ และไฟล์ขนาดใหญ่อาจใช้เวลานานในการเรียกใช้ โดยเฉพาะบนอุปกรณ์เคลื่อนที่
![คำแนะนำในการเพิ่มประสิทธิภาพ Webpack](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-performance-optim-174c6e4d62345.jpg?hl=th)
ขนาดกลุ่ม
Bundlesize เป็นแพ็กเกจ npm แบบง่ายที่จะทดสอบขนาดของชิ้นงานกับเกณฑ์ที่คุณตั้งค่าไว้ ซึ่งสามารถทำงานได้ในเครื่องและผสานรวมกับ CI ของคุณ
CLI ขนาดกลุ่ม
เรียกใช้ bundlesize CLI โดยระบุเกณฑ์และไฟล์ที่ต้องการทดสอบ
bundlesize -f "dist/bundle.js" -s 170kB
Bundlesize แสดงผลลัพธ์การทดสอบที่มีโค้ดสีใน 1 บรรทัด
![การทดสอบ CLI สำหรับ Bundlesize ไม่สำเร็จ](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/failing-bundlesize-cli-te-25490fc5a9ce2.png?hl=th)
![ผ่านการทดสอบ CLI ขนาด Bundle](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/passing-bundlesize-cli-te-b41d7dc6c93a.png?hl=th)
ขนาดกลุ่มสำหรับ CI
คุณจะได้รับประโยชน์สูงสุดจาก Bundlesize หากผสานรวมกับ CI เพื่อบังคับใช้ขีดจำกัดขนาดสำหรับคำขอพุลโดยอัตโนมัติ หากการทดสอบ Bundlesize ไม่สำเร็จ ระบบจะไม่รวมคำขอพุลนั้น โดยใช้งานได้กับคำขอพุลบน GitHub กับ Travis CI, CircleCI, Wercker และ Drone
![สถานะการตรวจสอบขนาด Bundle ใน GitHub](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/bundlesize-check-status-742e3e8c62318.jpg?hl=th)
คุณอาจมีแอปที่ทำงานเร็วอยู่แล้ว แต่การเพิ่มรหัสใหม่อาจเปลี่ยนแปลงได้บ่อยครั้ง การตรวจสอบพุลคำขอที่มี Bundlesize จะช่วยให้คุณหลีกเลี่ยงการถดถอยด้านประสิทธิภาพ Bootstrap, Tinder, Trivago และอีกหลายๆ แหล่งใช้เครื่องมือนี้ในการตรวจสอบงบประมาณ
Bundlesize ช่วยให้คุณกำหนดเกณฑ์สำหรับแต่ละไฟล์แยกกันได้ ซึ่งจะเป็นประโยชน์อย่างยิ่งหากคุณแยกแพ็กเกจในแอปพลิเคชันของคุณ
โดยค่าเริ่มต้น จะทดสอบขนาดของชิ้นงานที่บีบอัด คุณอาจใช้ตัวเลือกการบีบอัดเพื่อเปลี่ยนไปใช้การบีบอัดโบรทลี หรือปิดไปเลยก็ได้
บ็อต Lighthouse
![บ็อต Lighthouse](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-3e2ca69e8688f.png?hl=th)
Lighthouse Bot ผสานรวมกับ Travis CI และบังคับใช้นโยบายตามการตรวจสอบ Lighthouse จาก 5 หมวดหมู่ของ Lighthouse เช่น งบประมาณ 100 สำหรับคะแนนประสิทธิภาพของ Lighthouse บางครั้งการติดตามตัวเลขเพียงจำนวนเดียวก็ง่ายกว่างบประมาณของชิ้นงานแต่ละรายการ และคะแนนของ Lighthouse ก็คำนึงถึงสิ่งต่างๆ มากมาย
![คะแนน Lighthouse 💯](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-scores-c11f98857eaf.png?hl=th)
บ็อต 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](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-check-stat-76287c5940f5b.png?hl=th)
จากนั้น Lighthouse Bot จะแสดงความคิดเห็นในคำขอพุลของคุณด้วยคะแนนที่อัปเดต นี่เป็นคุณลักษณะที่เป็นระเบียบ ซึ่งกระตุ้นให้เกิดการสนทนาเกี่ยวกับประสิทธิภาพเมื่อมีการเปลี่ยนแปลงโค้ดเกิดขึ้น
![คะแนนการรายงานของ Lighthouse เกี่ยวกับคำขอพุล](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-reporting-scor-f1b8e2faca379.png?hl=th)
หากพบว่าคำขอพุลของคุณถูกบล็อกโดยคะแนน Lighthouse ต่ำ ให้ดำเนินการตรวจสอบด้วย Lighthouse CLI หรือในเครื่องมือสำหรับนักพัฒนาเว็บ สร้างรายงานที่มีรายละเอียดเกี่ยวกับจุดคอขวดและคำแนะนำในการเพิ่มประสิทธิภาพที่ง่ายดาย
สรุป
เครื่องมือ | CLI | CI | สรุป |
---|---|---|---|
ประภาคาร | ✔️ | ❌ |
|
Webpack | ✔️ | ❌ |
|
ขนาดกลุ่ม | ✔️ | ✔️ |
|
บ็อต Lighthouse | ❌ | ✔️ |
|