Kết hợp ngân sách hiệu suất vào quy trình xây dựng

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. 🕵️‍♀️

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:

  • document
  • font
  • image
  • media
  • other
  • script
  • stylesheet
  • third-party
  • total

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.

Phần Ngân sách trong báo cáo Lighthouse
Mục "Ngân sách" trong báo cáo Lighthouse

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 hoặc lỗi dòng lệnh khi kích thước gói của bạn vượt 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.

Đầu ra Webpack làm nổi bật bundle.js
bundle.js được làm nổi bật lớn hơn ngân sách của bạn

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.

Cảnh báo về kích thước gói Webpack
Cảnh báo về kích thước gói Webpack ⚠️

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.

Đề xuất tối ưu hoá hiệu suất Webpack
Tính năng bổ sung: webpack không chỉ cảnh báo bạn mà còn đưa ra đề xuất về cách giảm kích thước gói. 💁

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. Công cụ này có thể chạy cục bộ và tích hợp với CI của bạn.

Bundlesize CLI

Chạy bundlesize CLI bằng cách chỉ định ngưỡng và tệp mà bạn muốn kiểm thử.

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.

Không kiểm thử được CLI bundlesize
Không vượt qua kiểm thử CLI bundlesize ❌
Đậu kiểm thử CLI bundlesize
Vượt qua kiểm thử CLI bundlesize ✔️

Kích thước gói cho CI

Bạn sẽ nhận được nhiều giá trị nhất từ bundlesize nếu tích hợp công cụ này với một CI để tự động thực thi các giới hạn về kích thước đối với các yêu cầu kéo. 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, WerckerDrone.

Trạng thái kiểm tra kích thước gói trên GitHub
Trạng thái kiểm tra kích thước gói trên GitHub

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 các yêu cầu kéo bằng kích thước gói sẽ giúp bạn tránh được sự suy giảm hiệu suất. Bootstrap, Tinder, Trivago và nhiều công ty khác sử dụng công cụ này để kiểm soát ngân sách.

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 kiểm thử kích thước tài sản được nén bằng gzip. 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 tính năng này.

Bot Lighthouse

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 theo dõi một con số đơn lẻ sẽ đơn giản hơn so với việc theo dõi ngân sách tài sản riêng lẻ và điểm số của Lighthouse sẽ tính đến nhiều yếu tố.

Điểm Lighthouse 💯
Điểm Lighthouse 💯

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. Hãy cố gắng duy trì ở vùng xanh lục với điểm số í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. ⛔

Trạng thái kiểm tra của Bot Lighthouse trên GitHub
Trạng thái kiểm tra của Bot Lighthouse trên GitHub

Sau đó, Lighthouse Bot sẽ bình luận về yêu cầu kéo dữ liệu của bạn kèm theo điểm số mới 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.

Điểm báo cáo Lighthouse trên yêu cầu kéo
Điểm báo cáo Lighthouse trên yêu cầu kéo 💬

Nếu bạn thấy yêu cầu kéo bị chặn do điểm số Lighthouse thấp, hãy chạy quy trình kiểm tra bằng Lighthouse CLI hoặc trong Công cụ dành cho nhà phát triển. Công cụ này tạo một báo cáo có thông tin chi tiết về các nút thắt cổ chai và gợi ý về các phương pháp tối ưu hoá đơ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 ✔️
  • Ngân sách cho các loại tài nguyên khác nhau dựa trên kích thước hoặc số lượng của tài nguyên.
webpack ✔️
  • Ngân sách dựa trên kích thước của các thành phần do webpack tạo.
  • Kiểm tra kích thước không nén.
bundlesize ✔️ ✔️
  • Ngân sách dựa trên kích thước của các tài nguyên cụ thể.
  • Kiểm tra kích thước nén hoặc không nén.
Bot Lighthouse ✔️
  • Ngân sách dựa trên điểm số Lighthouse.