คุณทำงานมาอย่างหนักเพื่อให้ทำงานเร็วได้ ทีนี้มาทำให้ร่างกายของคุณรวดเร็วทันใจ ด้วย 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
คอนโซลจะถามคำถามต่างๆ ระหว่างการตั้งค่าดังนี้
- เมื่อระบบแจ้งให้เลือกฟีเจอร์ ให้เลือก "โฮสติ้ง"
- สําหรับโปรเจ็กต์ Firebase เริ่มต้น ให้เลือกโปรเจ็กต์ที่คุณสร้างในคอนโซล Firebase
- พิมพ์เป็น "สาธารณะ" เป็นไดเรกทอรีสาธารณะของคุณ
- พิมพ์ "N" (ไม่) กำหนดค่าเป็นแอปหน้าเดียว
ขั้นตอนนี้จะสร้างไฟล์กําหนดค่า firebase.json
ที่รูทของไดเรกทอรีโปรเจ็กต์
ยินดีด้วย คุณพร้อมใช้งานแล้ว เรียกใช้:
firebase deploy
อีกเพียงเสี้ยววินาที แอปจะแสดงเผยแพร่อยู่
3. การตั้งค่า Travis
คุณจะต้องลงทะเบียนบัญชีใน Travis จากนั้น เปิดใช้งานการผสานรวมแอป GitHub ในส่วนการตั้งค่าของโปรไฟล์
เมื่อคุณมีบัญชีแล้ว
ไปที่การตั้งค่าในโปรไฟล์ กดปุ่มซิงค์บัญชี และตรวจสอบว่าที่เก็บโปรเจ็กต์แสดงอยู่ใน Travis
หากต้องการเริ่มการผสานรวมอย่างต่อเนื่อง คุณต้องมี 2 สิ่งต่อไปนี้
- เพื่อให้มีไฟล์
.travis.yml
ในไดเรกทอรีราก - วิธีเรียกใช้การสร้างโดยทำ 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" เป็นผู้ทำงานร่วมกัน (การตั้งค่า>ผู้ทำงานร่วมกัน)
การอนุมัติคำขอเหล่านี้เป็นกระบวนการที่ต้องทำด้วยตนเอง จึงอาจใช้เวลาสักครู่ ก่อนจะเริ่มทดสอบ โปรดตรวจสอบว่า 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
- ตรวจสอบสาขาใหม่
- พุชไปยัง GitHub
- สร้างคำขอพุล
อดใจรอหน้าการดึงคำขอและรอให้ Lighthouse Bot ร้องเพลง! 🎤
คะแนนประสิทธิภาพยอดเยี่ยม แอปมีค่าใช้จ่ายต่ำกว่างบประมาณ และผ่านการตรวจสอบแล้ว
ตัวเลือก 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
ตัวเลือก