การใช้บ็อต Lighthouse เพื่อกำหนดงบประมาณด้านประสิทธิภาพ

Milica Mihajlija

คุณทำงานมาอย่างหนักเพื่อให้ทำงานเร็วได้ ทีนี้มาทำให้ร่างกายของคุณรวดเร็วทันใจ ด้วย Lighthouse Bot

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

Lighthouse Bot ผสานรวมกับ Travis CI และฟีเจอร์งบประมาณด้านประสิทธิภาพก็ช่วยให้มั่นใจได้ เพื่อป้องกันไม่ให้ระบบปรับลดรุ่นโดยบังเอิญโดยที่คุณไม่ทราบ คุณสามารถกําหนดค่าที่เก็บเพื่อไม่ให้อนุญาตให้ผสานคําขอดึงข้อมูลได้หากคะแนน Lighthouse ต่ำกว่าเกณฑ์ที่ตั้งไว้ (เช่น < 96/100)

การตรวจสอบของบ็อต Lighthouse ใน GitHub ไม่ผ่าน
Lighthouse Bot ตรวจสอบ GitHub

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

1. ตั้งค่า

แอปง่ายๆ นี้ช่วยให้คุณจัดเรียงตัวเลข 3 ตัวได้

โคลนตัวอย่างจาก GitHub และเพิ่มเป็นที่เก็บในบัญชี GitHub แล้ว

2. ทำให้ใช้งานได้กับ Firebase

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

การนำส่งไปยัง Firebase

คุณจะต้องมี Firebase CLI เพื่อทำให้แอปใช้งานได้ แม้ว่าจะติดตั้งไว้แล้วก็ตาม แต่คุณควรอัปเดต CLI เป็นเวอร์ชันล่าสุดเป็นประจำด้วยคำสั่งนี้

npm install -g firebase-tools

หากต้องการให้สิทธิ์ Firebase CLI ให้เรียกใช้คำสั่งต่อไปนี้

firebase login

เริ่มต้นโปรเจ็กต์โดยทำดังนี้

firebase init

คอนโซลจะถามคำถามต่างๆ ระหว่างการตั้งค่าดังนี้

  • เมื่อระบบแจ้งให้เลือกฟีเจอร์ ให้เลือก "โฮสติ้ง"
  • สําหรับโปรเจ็กต์ Firebase เริ่มต้น ให้เลือกโปรเจ็กต์ที่คุณสร้างในคอนโซล Firebase
  • พิมพ์เป็น "สาธารณะ" เป็นไดเรกทอรีสาธารณะของคุณ
  • พิมพ์ "N" (ไม่) กำหนดค่าเป็นแอปหน้าเดียว

ขั้นตอนนี้จะสร้างไฟล์กําหนดค่า firebase.json ที่รูทของไดเรกทอรีโปรเจ็กต์

ยินดีด้วย คุณพร้อมใช้งานแล้ว เรียกใช้:

firebase deploy

อีกเพียงเสี้ยววินาที แอปจะแสดงเผยแพร่อยู่

3. การตั้งค่า Travis

คุณจะต้องลงทะเบียนบัญชีใน Travis จากนั้น เปิดใช้งานการผสานรวมแอป GitHub ในส่วนการตั้งค่าของโปรไฟล์

การผสานรวมแอป GitHub ใน Travis CI

เมื่อคุณมีบัญชีแล้ว

ไปที่การตั้งค่าในโปรไฟล์ กดปุ่มซิงค์บัญชี และตรวจสอบว่าที่เก็บโปรเจ็กต์แสดงอยู่ใน Travis

หากต้องการเริ่มการผสานรวมอย่างต่อเนื่อง คุณต้องมี 2 สิ่งต่อไปนี้

  1. เพื่อให้มีไฟล์ .travis.yml ในไดเรกทอรีราก
  2. วิธีเรียกใช้การสร้างโดยทำ git push แบบเดิม

ที่เก็บ lighthouse-bot-starter มีไฟล์ YAML ของ .travis.yml อยู่แล้ว:

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

ไฟล์ YAML จะบอกให้ Travis ติดตั้ง Dependency ทั้งหมดและสร้างแอปของคุณ ตอนนี้ถึงตาคุณแล้วที่จะพุชแอปตัวอย่างไปยังที่เก็บ GitHub ของคุณเอง หากยังไม่ได้ดำเนินการ ให้เรียกใช้คําสั่งต่อไปนี้

git push origin main

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

4. ทำให้ Firebase ใช้งานได้โดยอัตโนมัติด้วย Travis

ในขั้นตอนที่ 2 คุณได้เข้าสู่ระบบบัญชี Firebase และติดตั้งใช้งานแอปจากบรรทัดคำสั่งด้วย firebase deploy เพื่อให้ Travis ทำให้แอปของคุณใช้งานได้ คุณต้องให้สิทธิ์ Firebase คุณจะทำอย่างไร ด้วยโทเค็น Firebase 🗝️🔥

ให้สิทธิ์ Firebase

หากต้องการสร้างโทเค็น ให้เรียกใช้คําสั่งนี้

firebase login:ci

ซึ่งจะเปิดแท็บใหม่ในหน้าต่างเบราว์เซอร์เพื่อให้ Firebase ยืนยันตัวตนของคุณได้ หลังจากนั้น ให้ย้อนกลับไปที่คอนโซล คุณจะเห็นโทเค็นที่สร้างล่าสุด คัดลอกแล้วกลับไปที่ Travis

ในหน้าแดชบอร์ด Travis ของโปรเจ็กต์ ให้ไปที่ตัวเลือกเพิ่มเติม > การตั้งค่า > ตัวแปรสภาพแวดล้อม

วางโทเค็นในช่องค่า ตั้งชื่อตัวแปรเป็น FIREBASE_TOKEN แล้วเพิ่ม

เพิ่มการทําให้ใช้งานได้ในการตั้งค่า Travis

คุณต้องใช้บรรทัดต่อไปนี้เพื่อแจ้งให้ Travis ติดตั้งใช้งานแอปหลังจากบิลด์เสร็จสมบูรณ์ทุกครั้ง เพิ่มต่อท้ายในไฟล์ .travis.yml 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

พุชการเปลี่ยนแปลงนี้ไปยัง GitHub และรอการทำให้ใช้งานได้อัตโนมัติครั้งแรก หากดูบันทึก Travis จะเห็นว่า ✔️ ทำให้ใช้งานได้เรียบร้อยแล้ว

ตอนนี้เมื่อใดก็ตามที่คุณทำการเปลี่ยนแปลงในแอป การเปลี่ยนแปลงนั้นจะปรับใช้กับ Firebase โดยอัตโนมัติ

5. การตั้งค่า Lighthouse Bot

Friendly Lighthouse Bot จะอัปเดตคะแนน Lighthouse ของแอปให้คุณทราบ เพียงแค่ต้องได้รับคําเชิญไปยังที่เก็บของคุณ

ใน GitHub ให้ไปที่การตั้งค่าของโปรเจ็กต์และเพิ่ม "lighthousebot" เป็นผู้ทำงานร่วมกัน (การตั้งค่า>ผู้ทำงานร่วมกัน)

สถานะผู้ทำงานร่วมกันของบ็อต Lighthouse

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

ใน Travis ให้เพิ่มคีย์นี้เป็นตัวแปรสภาพแวดล้อมและตั้งชื่อเป็น LIGHTHOUSE_API_KEY:

เพิ่ม Lighthouse Bot ลงในโปรเจ็กต์

ถัดไป ให้เพิ่ม Lighthouse Bot ลงในโปรเจ็กต์โดยเรียกใช้คำสั่งต่อไปนี้

npm i --save-dev https://github.com/ebidel/lighthousebot

และเพิ่มบิตนี้ลงใน package.json:

"scripts": {
  "lh": "lighthousebot"
}

เพิ่ม Lighthouse Bot ลงในการกำหนดค่า Travis

เคล็ดลับสุดท้ายคือทดสอบประสิทธิภาพของแอปหลังจากการดึงข้อมูลทุกครั้ง

ใน .travis.yml ให้เพิ่มขั้นตอนอื่นใน after_success

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

ระบบจะเรียกใช้การตรวจสอบ Lighthouse ใน URL ที่ระบุ ดังนั้นให้แทนที่ https://staging.example.com ด้วย URL ของแอป (เช่น your-app-123.firebaseapp.com)

กำหนดมาตรฐานให้สูงและปรับการตั้งค่าเพื่อไม่ให้ยอมรับการเปลี่ยนแปลงแอปที่ทำให้คะแนนประสิทธิภาพต่ำกว่า 95

- npm run lh -- --perf=95 https://staging.example.com

ส่งคำขอดึงเพื่อเรียกใช้การทดสอบบ็อต Lighthouse ใน Travis

Lighthouse Bot จะทดสอบคำขอพุลเท่านั้น ดังนั้นหากคุณพุชไปยัง Branch หลัก ตอนนี้คุณจะได้รับเพียงข้อความ "สคริปต์นี้สามารถทำงานในคำขอ PR ของ Travis เท่านั้น" ใน บันทึก Travis

วิธีเรียกใช้การทดสอบด้วย Lighthouse Bot

  1. ตรวจสอบสาขาใหม่
  2. พุชไปยัง GitHub
  3. สร้างคำขอพุล

อดใจรอหน้าการดึงคำขอและรอให้ Lighthouse Bot ร้องเพลง! 🎤

คะแนน Lighthouse ที่ผ่าน

ผ่านการตรวจสอบของ GitHub

คะแนนประสิทธิภาพยอดเยี่ยม แอปมีค่าใช้จ่ายต่ำกว่างบประมาณ และผ่านการตรวจสอบแล้ว

ตัวเลือก Lighthouse เพิ่มเติม

จำวิธีที่ Lighthouse ทดสอบหมวดหมู่ต่างๆ ทั้ง 5 หมวดหมู่ได้ไหม คุณสามารถบังคับใช้คะแนนสำหรับหน้าเว็บใดก็ได้ที่มี Flag ของ Lighthouse Bot ดังต่อไปนี้

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

ตัวอย่าง

npm run lh -- --perf=93 --seo=100 https://staging.example.com

การดำเนินการนี้จะถือว่าไม่ผ่าน PR หากคะแนนประสิทธิภาพลดลงต่ำกว่า 93 หรือคะแนน SEO ลดลงต่ำกว่า 100

นอกจากนี้ คุณยังเลือกไม่รับความคิดเห็นของ Lighthouse Bot ได้ด้วย--no-comment ตัวเลือก