Bạn đã rất nỗ lực để tăng tốc, giờ hãy đảm bảo bạn luôn nhanh chóng bằng cách tự động kiểm tra hiệu suất với Lighthouse Bot.
Lighthouse xếp ứng dụng của bạn theo 5 danh mục và một trong số đó là hiệu suất. Mặc dù bạn có thể cố gắng nhớ theo dõi các thay đổi về hiệu suất bằng DevTools hoặc Lighthouse CLI mỗi khi chỉnh sửa mã, nhưng bạn không phải làm việc đó. Công cụ có thể giúp bạn làm những công việc tẻ nhạt. Travis CI là một dịch vụ tuyệt vời giúp tự động chạy các bài kiểm thử cho ứng dụng của bạn trên đám mây mỗi khi bạn đẩy mã mới.
Lighthouse Bot tích hợp với Travis CI và tính năng ngân sách hiệu suất của công cụ này đảm bảo rằng bạn sẽ không vô tình hạ cấp hiệu suất mà không nhận thấy. Bạn có thể định cấu hình kho lưu trữ để kho lưu trữ không cho phép hợp nhất các yêu cầu kéo nếu điểm số Lighthouse thấp hơn ngưỡng bạn đã đặt (ví dụ: < 96/100).
Mặc dù bạn có thể kiểm tra hiệu suất trên máy chủ cục bộ, nhưng trang web của bạn thường sẽ hoạt động không giống nhau trên các máy chủ đang hoạt động. Để có được hình ảnh thực tế hơn, tốt nhất là bạn nên triển khai trang web của mình cho một máy chủ thử nghiệm. Bạn có thể sử dụng bất kỳ dịch vụ lưu trữ nào; hướng dẫn này sẽ trình bày nhanh về tính năng lưu trữ Firebase.
1. Thiết lập
Ứng dụng đơn giản này giúp bạn sắp xếp ba số.
Nhân bản ví dụ từ GitHub và đảm bảo thêm ví dụ đó làm kho lưu trữ trên tài khoản GitHub của bạn.
2. Triển khai cho Firebase
Để bắt đầu, bạn cần có tài khoản Firebase. Sau khi giải quyết xong, hãy tạo một dự án mới trong bảng điều khiển của Firebase bằng cách nhấp vào "Thêm dự án":
Triển khai cho Firebase
Bạn cần có Firebase CLI để triển khai ứng dụng. Ngay cả khi đã cài đặt ứng dụng này, bạn vẫn nên thường xuyên cập nhật CLI lên phiên bản mới nhất bằng lệnh sau:
npm install -g firebase-tools
Để cho phép Giao diện dòng lệnh (CLI) của Firebase, hãy chạy mã:
firebase login
Bây giờ, hãy khởi động dự án:
firebase init
Trong quá trình thiết lập, bảng điều khiển sẽ hỏi bạn một loạt câu hỏi:
- Khi được nhắc chọn tính năng, hãy chọn "Lưu trữ".
- Đối với dự án Firebase mặc định, hãy chọn dự án mà bạn đã tạo trong bảng điều khiển của Firebase.
- Nhập "công khai" làm thư mục công khai của bạn.
- Nhập "N" (không) để định cấu hình làm ứng dụng trang đơn.
Quá trình này sẽ tạo một tệp cấu hình firebase.json trong gốc của thư mục dự án.
Xin chúc mừng, bạn đã sẵn sàng triển khai! Chạy:
firebase deploy
Bạn sẽ có một ứng dụng phát trực tiếp trong tích tắc.
3. Thiết lập Travis
Bạn cần đăng ký một tài khoản trên Travis, sau đó kích hoạt tính năng tích hợp Ứng dụng GitHub trong phần Cài đặt của hồ sơ.
Sau khi có tài khoản
Chuyển đến phần Settings (Cài đặt) trong hồ sơ của bạn, nhấn vào nút Sync account và đảm bảo kho lưu trữ dự án của bạn được liệt kê trên Travis.
Để bắt đầu quá trình tích hợp liên tục, bạn cần đáp ứng 2 điều sau:
- Để có tệp
.travis.ymltrong thư mục gốc - Để kích hoạt bản dựng bằng cách thực hiện một lần đẩy git cũ thông thường
Kho lưu trữ lighthouse-bot-starter đã có tệp YAML .travis.yml:
language: node_js
node_js:
- "8.1.3"
install:
- npm install
before_script:
- npm install -g firebase-tools
script:
- webpack
Tệp YAML sẽ yêu cầu Travis cài đặt tất cả phần phụ thuộc và tạo ứng dụng của bạn. Bây giờ, bạn cần đẩy ứng dụng mẫu vào kho lưu trữ GitHub của riêng bạn. Nếu bạn chưa làm như vậy, hãy chạy lệnh sau:
git push origin main
Nhấp vào kho lưu trữ của bạn trong phần Cài đặt trong Travis để xem trang tổng quan Travis của dự án. Nếu mọi thứ đều ổn, bạn sẽ thấy bản dựng chuyển từ màu vàng sang màu xanh lục sau vài phút. 🎉
4. Tự động hoá việc triển khai Firebase bằng Travis
Ở Bước 2, bạn đã đăng nhập vào tài khoản Firebase và triển khai ứng dụng qua dòng lệnh bằng firebase deploy. Bạn phải cho phép Travis triển khai ứng dụng của mình cho Firebase. Bạn làm cách nào để thực hiện điều đó? Bằng mã thông báo Firebase.
🗝️🔥
Uỷ quyền Firebase
Để tạo mã thông báo, hãy chạy lệnh sau:
firebase login:ci
Thao tác này sẽ mở một thẻ mới trong cửa sổ trình duyệt để Firebase có thể xác minh bạn. Sau đó, hãy nhìn lại bảng điều khiển và bạn sẽ thấy mã thông báo mới được đúc. Hãy sao chép mã rồi quay lại Travis.
Trong trang tổng quan Travis của dự án, hãy chuyển đến More options (Tuỳ chọn khác) > Settings (Cài đặt) > Environment Variable (Biến môi trường).
Dán mã thông báo vào trường giá trị, đặt tên cho biến FIREBASE_TOKEN rồi thêm biến đó.
Thêm quá trình triển khai vào chế độ thiết lập Travis
Bạn cần các dòng sau để yêu cầu Travis triển khai ứng dụng sau mỗi lần tạo bản dựng thành công.
Thêm chúng vào cuối tệp .travis.yml. 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
Đẩy thay đổi này sang GitHub và chờ quá trình triển khai tự động đầu tiên của bạn. Nếu có xem nhật ký Travis của mình, bạn sẽ sớm thấy thông báo ✔️ Đã triển khai xong!
Giờ đây, bất cứ khi nào bạn thực hiện thay đổi đối với ứng dụng của mình, các thay đổi đó sẽ tự động được triển khai cho Firebase.
5. Thiết lập Lighthouse Bot
Thân thiện Lighthouse Bot sẽ cập nhật cho bạn điểm số Lighthouse của ứng dụng của bạn. Chỉ cần lời mời vào kho lưu trữ của bạn.
Trên GitHub, hãy chuyển đến phần cài đặt của dự án rồi thêm "Lighthousebot" làm cộng tác viên (Cài đặt> Cộng tác viên):
Việc phê duyệt các yêu cầu này là một quy trình thủ công nên không phải lúc nào chúng cũng xảy ra ngay lập tức. Trước khi bạn bắt đầu thử nghiệm, hãy đảm bảo Lighthousebot đã được phê duyệt trạng thái cộng tác viên. Trong thời gian chờ đợi, bạn cũng cần thêm một khoá khác vào các biến môi trường của dự án trên Travis. Hãy để lại email tại đây và bạn sẽ nhận được khoá Lighthouse Bot trong hộp thư đến. 📬
Trên Travis, hãy thêm khoá này làm biến môi trường và đặt tên là LIGHTHOUSE_API_KEY:
Thêm Lighthouse Bot vào dự án
Tiếp theo, hãy thêm Lighthouse Bot vào dự án của bạn bằng cách chạy:
npm i --save-dev https://github.com/ebidel/lighthousebot
Và thêm bit này vào package.json:
"scripts": {
"lh": "lighthousebot"
}
Thêm Lighthouse Bot vào cấu hình Travis
Đối với mẹo cuối cùng, hãy kiểm thử hiệu suất của ứng dụng sau mỗi lần yêu cầu kéo (pull request)!
Trong .travis.yml, hãy thêm một bước khác trong after_thành công:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Thao tác này sẽ chạy quy trình kiểm tra Lighthouse trên URL đã cho, vì vậy, hãy thay thế https://staging.example.com bằng URL của ứng dụng (đó là your-app-123.firebaseapp.com).
Đặt tiêu chuẩn cao và tinh chỉnh chế độ thiết lập để không chấp nhận bất kỳ thay đổi nào đối với ứng dụng mang lại điểm hiệu suất dưới 95:
- npm run lh -- --perf=95 https://staging.example.com
Tạo một yêu cầu kéo (pull request) để kích hoạt kiểm tra Lighthouse Bot trên Travis
Lighthouse Bot sẽ chỉ kiểm thử các yêu cầu kéo, vì vậy, nếu đẩy đến nhánh chính ngay bây giờ, bạn sẽ chỉ nhận được thông báo "Tập lệnh này chỉ có thể chạy trên các yêu cầu PR của Travis" trong nhật ký Travis của mình.
Cách kích hoạt thử nghiệm Bot Lighthouse:
- Thanh toán chi nhánh mới
- Đẩy lên GitHub
- Đưa ra yêu cầu lấy dữ liệu
Hãy kiên nhẫn chờ trang yêu cầu lấy dữ liệu đó và chờ Lighthouse Bot hát lên! 🎤
Điểm hiệu suất rất tốt, ứng dụng dưới ngân sách và bước kiểm tra đã thành công!
Tùy chọn Lighthouse khác
Bạn có nhớ cách Lighthouse kiểm tra 5 danh mục khác nhau không? Bạn có thể thực thi điểm số cho bất kỳ chế độ cài đặt nào có cờ Lighthouse Bot:
--perf # performance
--pwa # progressive web app score
--a11y # accessibility score
--bp # best practices score
--seo # SEO score
Ví dụ:
npm run lh -- --perf=93 --seo=100 https://staging.example.com
Điều này sẽ không giúp PR đạt được kết quả nếu điểm hiệu suất giảm xuống dưới 93 hoặc điểm SEO giảm xuống dưới 100.
Bạn cũng có thể chọn không nhận nhận xét của Lighthouse Bot bằng tuỳ chọn --no-comment.