หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Milica Mihajlija

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

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

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

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

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

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

document
font
image
media
other
script
stylesheet
third-party
total

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

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

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

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

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

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

เอาต์พุต Webpack ที่ไฮไลต์ Bundle.js — Bundle.js ที่ไฮไลต์สูงกว่างบประมาณของคุณ

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

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

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

ขนาดกลุ่ม

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

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

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

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

Bundlesize ให้ผลการทดสอบที่มีรหัสสีเป็นบรรทัดเดียว

การทดสอบ CLI สำหรับ Bundlesize ล้มเหลว — การทดสอบ CLI สำหรับ Bundlesize ไม่ผ่าน ❌

การทดสอบ CLI ในรูปแบบ Bundlesize — ผ่านการทดสอบ CLI แบบ 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 ใน GitHub

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

คะแนนการรายงานของ Lighthouse เมื่อมีการดึงคำขอ — คะแนนการรายงานของ Lighthouse เกี่ยวกับคำขอดึง 💬

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

สรุป

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