Sau khi xác định ngân sách hiệu suất, bạn cần thiết lập quy trình xây dựng để theo dõi ngân sách đó. Có một số công cụ cho phép bạn xác định ngưỡng cho các chỉ số hiệu suất đã chọn và cảnh báo bạn nếu bạn vượt quá ngân sách. Tìm hiểu cách chọn một chế độ phù hợp nhất với nhu cầu và chế độ thiết lập hiện tại của bạn. 🕵️♀️
Ngân sách hiệu suất của Lighthouse
Lighthouse là một công cụ kiểm tra trang web ở một số khía cạnh chính, bao gồm hiệu suất, khả năng hỗ trợ tiếp cận, các phương pháp hay nhất và mức độ hiệu quả của trang web dưới dạng ứng dụng web tiến bộ.
Phiên bản dòng lệnh của Lighthouse (phiên bản 5 trở lên) hỗ trợ việc đặt ngân sách hiệu suất dựa trên:
- kích thước tài nguyên
- số lượng tài nguyên
Bạn có thể đặt ngân sách cho bất kỳ loại tài nguyên nào sau đây:
documentfontimagemediaotherscriptstylesheetthird-partytotal
Ngân sách được đặt trong tệp JSON và sau khi xác định ngân sách, cột "Vượt quá ngân sách" mới sẽ cho bạn biết liệu bạn có vượt quá giới hạn nào hay không.
Gợi ý về hiệu suất của Webpack
Webpack là một công cụ xây dựng mạnh mẽ để tối ưu hoá cách thức phân phối mã cho người dùng. Công cụ này cũng hỗ trợ việc đặt ngân sách hiệu suất dựa trên kích thước thành phần.
Bật gợi ý về hiệu suất trong webpack.config.js để nhận cảnh báo dòng lệnh hoặc lỗi khi kích thước gói của bạn tăng quá giới hạn. Đây là một cách hay để luôn chú ý đến kích thước thành phần trong suốt quá trình phát triển.
Sau bước tạo bản dựng, webpack sẽ xuất ra một danh sách các thành phần và kích thước của các thành phần đó được mã hoá bằng màu sắc. Mọi nội dung vượt quá ngân sách đều được làm nổi bật bằng màu vàng.
Giới hạn mặc định cho cả thành phần và điểm truy cập là 250 KB. Bạn có thể đặt mục tiêu của riêng mình trong tệp cấu hình.
Ngân sách được so sánh với kích thước thành phần chưa nén. Kích thước JavaScript chưa nén có liên quan đến thời gian thực thi và các tệp lớn có thể mất nhiều thời gian để thực thi, đặc biệt là trên thiết bị di động.
Bundlesize
Bundlesize là một gói npm đơn giản kiểm tra kích thước tài sản dựa trên ngưỡng mà bạn đã đặt. Phiên bản này có thể chạy trên máy và tích hợp với CI.
CLI kích thước gói
Chạy bundlesize CLI bằng cách chỉ định ngưỡng và tệp mà bạn muốn thử nghiệm.
bundlesize -f "dist/bundle.js" -s 170kB
Bundlesize xuất kết quả kiểm thử được mã hoá bằng màu sắc trong một dòng.
Kích thước gói cho CI
Bạn sẽ khai thác được nhiều giá trị nhất từ kích thước gói nếu tích hợp kích thước gói đó với CI để tự động thực thi giới hạn kích thước đối với các yêu cầu lấy dữ liệu. Nếu kiểm thử kích thước gói không thành công, thì yêu cầu kéo đó sẽ không được hợp nhất. Công cụ này hoạt động cho các yêu cầu kéo trên GitHub với Travis CI, CircleCI, Wercker và Drone.
Hôm nay, ứng dụng của bạn có thể chạy nhanh, nhưng việc thêm mã mới thường có thể thay đổi điều này. Việc kiểm tra yêu cầu lấy dữ liệu với kích thước gói sẽ giúp bạn tránh được lỗi hồi quy hiệu suất. Tự thân khởi nghiệp, Tinder, Trivago và nhiều người khác sử dụng công cụ này để kiểm soát ngân sách của họ.
Với bundlesize, bạn có thể đặt ngưỡng riêng cho từng tệp. Điều này đặc biệt hữu ích nếu bạn đang tách một gói trong ứng dụng.
Theo mặc định, công cụ này sẽ kiểm tra kích thước thành phần được nén. Bạn có thể sử dụng tuỳ chọn nén để chuyển sang nén brotli hoặc tắt hoàn toàn tuỳ chọn này.
Bot Lighthouse
Lighthouse Bot tích hợp với Travis CI và thực thi ngân sách dựa trên bất kỳ danh mục kiểm tra nào trong số 5 danh mục kiểm tra của Lighthouse. Ví dụ: ngân sách 100 cho điểm hiệu suất Lighthouse. Đôi khi, việc để ý đến một con số đơn giản hơn so với ngân sách của từng thành phần và điểm số của Lighthouse xem xét nhiều yếu tố.
Trình kiểm tra Lighthouse sẽ chạy quy trình kiểm tra sau khi bạn triển khai một trang web lên máy chủ thử nghiệm. Trong .travis.yml, hãy đặt ngân sách cho các danh mục Lighthouse cụ thể bằng các tuỳ chọn --perf, --a11y, --bp, --seo hoặc --pwa. Cố gắng duy trì trạng thái "xanh" khi điểm số đạt ít nhất là 90.
after_success: - ./deploy.sh # Deploy the PR changes to staging server - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test
Nếu điểm số của một yêu cầu kéo trên GitHub thấp hơn ngưỡng mà bạn đã đặt, thì Lighthouse Bot có thể ngăn việc hợp nhất yêu cầu kéo. ⛔
Sau đó, Lighthouse Bot sẽ nhận xét về yêu cầu kéo của bạn với điểm số được cập nhật. Đây là một tính năng gọn gàng khuyến khích cuộc trò chuyện về hiệu suất khi các thay đổi về mã đang diễn ra.
Nếu bạn thấy yêu cầu lấy dữ liệu của mình bị chặn do điểm số kém trên Lighthouse, hãy chạy kiểm tra bằng Lighthouse CLI hoặc trong Công cụ dành cho nhà phát triển. Loại chiến dịch này tạo một báo cáo chứa thông tin chi tiết về những khó khăn và gợi ý để tối ưu hoá một cách đơn giản.
Tóm tắt
| Công cụ | CLI | CI (Bờ Biển Ngà) | Tóm tắt |
|---|---|---|---|
| Ngọn hải đăng | ✔️ | ❌ |
|
| webpack | ✔️ | ❌ |
|
| bundlesize | ✔️ | ✔️ |
|
| Bot Lighthouse | ❌ | ✔️ |
|