เมื่อคุณกำหนดงบประมาณด้านประสิทธิภาพแล้ว ก็ถึงเวลาสร้างกระบวนการสร้าง เพื่อติดตามการเปลี่ยนแปลงนั้น มีเครื่องมือมากมายที่ให้คุณกำหนดเกณฑ์ สำหรับเมตริกประสิทธิภาพที่เลือก และเตือนคุณหากใช้งบประมาณเกิน ดูข้อมูล วิธีเลือกโซลูชันที่เหมาะกับความต้องการและการตั้งค่าปัจจุบันของคุณมากที่สุด 🕵️♀️
งบประมาณด้านประสิทธิภาพของ 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 คือแพ็กเกจ npm อย่างง่ายที่ทดสอบขนาดของเนื้อหาเทียบกับเกณฑ์ที่คุณตั้งค่าไว้ โดยเรียกใช้ได้ในเครื่องและผสานรวมกับ CI
CLI สำหรับขนาดกลุ่ม
เรียกใช้ bundlesize CLI โดยระบุเกณฑ์และไฟล์ที่คุณต้องการทดสอบ
bundlesize -f "dist/bundle.js" -s 170kB
Bundlesize ให้ผลการทดสอบที่มีรหัสสีเป็นบรรทัดเดียว
Bundlesize สำหรับ CI
คุณจะได้รับประโยชน์สูงสุดจาก Bundlesize หากผสานรวมกับ CI เพื่อบังคับใช้ขีดจำกัดขนาดกับคำขอพุลโดยอัตโนมัติ หากการทดสอบ Bundlesize ไม่สำเร็จ ระบบจะไม่ผสานรวมคำขอพุลดังกล่าว ซึ่งใช้งานได้กับการดึงคำขอบน GitHub ที่มี Travis CI, CircleCI, Wercker และ Drone
คุณอาจมีแอปที่ทำงานรวดเร็วอยู่แล้วในปัจจุบัน แต่การเพิ่มโค้ดใหม่มักจะทำให้เรื่องนี้เปลี่ยนไปได้ การตรวจสอบคำขอพุลที่มี Bundlesize จะช่วยให้คุณหลีกเลี่ยงการถดถอยของประสิทธิภาพได้ Bootstrap, Tinder, Trivago และอีกหลายๆ บริษัทใช้แพลตฟอร์มนี้เพื่อตรวจสอบงบประมาณของตน
Bundlesize ทำให้คุณสามารถตั้งค่าเกณฑ์สำหรับแต่ละไฟล์แยกกันได้ ซึ่งจะเป็นประโยชน์อย่างยิ่งหากคุณจะแยก Bundle ในแอปพลิเคชัน
โดยค่าเริ่มต้น ซึ่งจะทดสอบขนาดของเนื้อหาที่บีบอัดด้วย 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 หรือในเครื่องมือสำหรับนักพัฒนาเว็บ โดยจะสร้างรายงานที่มีรายละเอียดเกี่ยวกับจุดคอขวดและคำแนะนำสำหรับการเพิ่มประสิทธิภาพที่ไม่ซับซ้อน
สรุป
เครื่องมือ | CLI | CI | สรุป |
---|---|---|---|
ประภาคาร | ✔️ | ❌ |
|
Webpack | ✔️ | ❌ |
|
Bundlesize | ✔️ | ✔️ |
|
บ็อต Lighthouse | ❌ | ✔️ |
|