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