คุณทำงานหนักแล้วเพื่อให้ได้ความเร็วเร็วทันใจด้วยการทำให้การทดสอบประสิทธิภาพทำงานโดยอัตโนมัติด้วย Lighthouse Bot
Lighthouse ให้คะแนนแอปของคุณเป็น 5 หมวดหมู่ และหนึ่งในนั้นคือประสิทธิภาพ แม้ว่าคุณอาจพยายามอย่าลืมตรวจสอบการเปลี่ยนแปลงด้านประสิทธิภาพด้วย DevTools หรือ Lighthouse CLI ทุกครั้งที่แก้ไขโค้ด แต่คุณไม่จำเป็นต้องดำเนินการดังกล่าว เครื่องมือสามารถทำเรื่องที่น่าเบื่อหน่ายให้คุณได้ Travis CI คือบริการที่ยอดเยี่ยมซึ่งจะทำการทดสอบโดยอัตโนมัติสำหรับแอปในระบบคลาวด์ทุกครั้งที่คุณพุชโค้ดใหม่
Lighthouse Bot ผสานรวมกับ Travis CI และใช้ฟีเจอร์งบประมาณด้านประสิทธิภาพที่ทำให้มั่นใจได้ว่าจะไม่ดาวน์เกรดประสิทธิภาพโดยไม่ได้ตั้งใจ คุณสามารถกำหนดค่าที่เก็บเพื่อไม่ให้รวมคำขอพุลได้ หากคะแนน Lighthouse ต่ำกว่าเกณฑ์ที่คุณตั้งไว้ (เช่น < 96/100)
แม้ว่าคุณจะทดสอบประสิทธิภาพบน 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
คอนโซลจะถามคำถามชุดหนึ่งกับคุณระหว่างการตั้งค่า:
- เมื่อระบบแจ้งให้เลือกฟีเจอร์ ให้เลือก "Hosting"
- สำหรับโปรเจ็กต์ Firebase เริ่มต้น ให้เลือกโปรเจ็กต์ที่คุณสร้างไว้ในคอนโซล Firebase
- พิมพ์ "สาธารณะ" เป็นไดเรกทอรีสาธารณะ
- พิมพ์ "N" (no) เพื่อกําหนดค่าเป็นแอปหน้าเว็บเดียว
กระบวนการนี้จะสร้างไฟล์การกำหนดค่า firebase.json ในรูทของไดเรกทอรีโปรเจ็กต์
ยินดีด้วย คุณพร้อมที่จะทำให้ใช้งานได้แล้ว เรียกใช้:
firebase deploy
เพียงเสี้ยววินาที คุณก็จะมีแอปที่เผยแพร่อยู่
3. การตั้งค่า Travis
คุณจะต้องลงทะเบียนบัญชีใน Travis แล้วเปิดใช้งานการผสานรวมแอป GitHub ในส่วนการตั้งค่าของโปรไฟล์
เมื่อคุณมีบัญชีแล้ว
ไปที่การตั้งค่าใต้โปรไฟล์ กดปุ่มซิงค์บัญชี แล้วตรวจสอบว่าที่เก็บโปรเจ็กต์ของคุณแสดงอยู่ใน Travis
ในการเริ่มต้นการผสานรวมอย่างต่อเนื่อง คุณจำเป็นต้องมี 2 สิ่งต่อไปนี้
- วิธีให้ไฟล์
.travis.ymlอยู่ในไดเรกทอรีราก - เพื่อทริกเกอร์บิลด์ด้วยการพุช Git เก่าแบบปกติ
ที่เก็บ 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 ของโปรเจ็กต์ หากทุกอย่างดูดีแล้ว คุณจะเห็นงานสร้างของคุณเปลี่ยนจากสีเหลืองเป็นสีเขียวใน 2-3 นาที 🎉
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
บ็อต Lighthouse ที่เป็นกันเองจะอัปเดตคะแนน Lighthouse ของแอปให้คุณทราบ เพียงแต่ต้องได้รับคำเชิญไปยังที่เก็บของคุณ
ใน GitHub ให้ไปที่การตั้งค่าโปรเจ็กต์แล้วเพิ่ม "ประภาคาร" เป็นผู้ทำงานร่วมกัน (การตั้งค่า > ผู้ทำงานร่วมกัน) โดยทำดังนี้
การอนุมัติคำขอเหล่านี้เป็นการดำเนินการด้วยตนเอง คำขอจึงไม่เกิดขึ้นทันทีเสมอไป ก่อนเริ่มการทดสอบ โปรดตรวจสอบว่า Lightbot ได้อนุมัติสถานะผู้ทำงานร่วมกันแล้ว ในระหว่างนี้ คุณต้องเพิ่มคีย์อื่นลงในตัวแปรสภาพแวดล้อมของโปรเจ็กต์บน Travis ด้วย เก็บอีเมลไว้ ที่นี่ แล้วคุณจะได้รับคีย์ของ Lighthouse Bot ในกล่องจดหมาย 📬
ใน Travis ให้เพิ่มคีย์นี้เป็นตัวแปรสภาพแวดล้อมและตั้งชื่อเป็น LIGHTHOUSE_API_KEY ดังนี้
เพิ่มบ็อต Lighthouse ในโปรเจ็กต์
ถัดไป ให้เพิ่มบ็อต Lighthouse ลงในโปรเจ็กต์โดยเรียกใช้
npm i --save-dev https://github.com/ebidel/lighthousebot
และเพิ่มบิตนี้ลงใน package.json:
"scripts": {
"lh": "lighthousebot"
}
เพิ่มบ็อต Lighthouse ในการกำหนดค่า Travis
สำหรับเคล็ดลับสุดท้าย ให้ทดสอบประสิทธิภาพของแอปหลังจากพุลคำขอทุกครั้ง
ใน .travis.yml ให้เพิ่มขั้นตอนหลังความสําเร็จ:
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 Bot ใน Travis
บ็อต Lighthouse จะทดสอบคำขอพุลเท่านั้น ดังนั้นหากคุณพุชไปยังสาขาหลักตอนนี้ คุณจะเห็น "สคริปต์นี้ทำงานได้ตามคำขอ PR ของ Travis เท่านั้น" ในบันทึกของ Travis
วิธีเริ่มการทดสอบบ็อต Lighthouse
- ชำระเงินที่สาขาใหม่
- พุชไปยัง GitHub
- สร้างการดึงคำขอ
อดใจรอหน้าคำขอพุลนั้น แล้วรอให้บ็อต Lighthouse ร้องเพลง 🎤
คะแนนประสิทธิภาพดีมาก แอปใช้งบประมาณไม่เกิน และผ่านการตรวจสอบ
ตัวเลือก Lighthouse เพิ่มเติม
คุณจำได้ไหมว่า Lighthouse ทดสอบหมวดหมู่ต่างๆ ทั้ง 5 หมวดหมู่อย่างไร คุณจะบังคับใช้คะแนนสำหรับรายการที่มี Flag บ็อต Lighthouse ได้ดังนี้
--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
ซึ่งจะทำให้การประชาสัมพันธ์ไม่สำเร็จหากคะแนนประสิทธิภาพลดลงต่ำกว่า 93 หรือคะแนน SEO ลดลงต่ำกว่า 100
นอกจากนี้ คุณยังเลือกไม่รับความคิดเห็นของบ็อต Lighthouse ได้โดยใช้ตัวเลือก --no-comment