Trang này được dịch bởi Cloud Translation API.

Theo dõi hiệu suất với Lighthouse CI

Cách thêm Lighthouse vào một hệ thống tích hợp liên tục, chẳng hạn như GitHub Actions.

Katie Hempenius

Lighthouse CI là một bộ để sử dụng Lighthouse trong quá trình tích hợp liên tục. Lighthouse CI có thể là được tích hợp vào quy trình làm việc của nhà phát triển theo nhiều cách. Hướng dẫn này đề cập đến các chủ đề sau:

Sử dụng Lighthouse CI CLI.
Định cấu hình nhà cung cấp CI để chạy Lighthouse CI.
Thiết lập GitHub Action và trạng thái kiểm tra cho Lighthouse CI. Thao tác này sẽ tự động hiển thị kết quả của Lighthouse trên Yêu cầu lấy dữ liệu GitHub.
Xây dựng trang tổng quan về hiệu suất và kho dữ liệu cho các báo cáo trên Lighthouse.

Tổng quan

Lighthouse CI là một bộ công cụ miễn phí hỗ trợ việc sử dụng Lighthouse cho giám sát hiệu suất. Một báo cáo Lighthouse cung cấp thông tin tổng quan nhanh về một trang web hiệu suất của trang tại thời điểm chạy; Lighthouse CI cho thấy cách phát hiện đã thay đổi theo thời gian. Số liệu này có thể dùng để xác định tác động của các thay đổi cụ thể về mã hoặc đảm bảo đáp ứng ngưỡng hiệu suất trong quá trình quá trình tích hợp liên tục. Mặc dù việc theo dõi hiệu suất là cách quan trọng nhất trường hợp sử dụng phổ biến cho Lighthouse CI, có thể được dùng để theo dõi các khía cạnh khác của báo cáo Lighthouse – ví dụ: SEO hoặc khả năng tiếp cận.

Chức năng cốt lõi của Lighthouse CI được cung cấp bằng lệnh Lighthouse CI giao diện dòng. (Lưu ý: Đây là một công cụ riêng biệt với Lighthouse CLI.) Chiến lược phát hành đĩa đơn Lighthouse CI CLI cung cấp một tập hợp lệnh để sử dụng Lighthouse CI. Ví dụ: lệnh autorun thực thi nhiều Lighthouse chạy, xác định báo cáo trung bình của Lighthouse rồi tải báo cáo lên cho bộ nhớ. Hành vi này có thể được tuỳ chỉnh ở mức độ cao bằng cách truyền thêm cờ hoặc tuỳ chỉnh tệp cấu hình của Lighthouse CI, lighthouserc.js.

Mặc dù chức năng cốt lõi của Lighthouse CI chủ yếu được gói gọn trong Lighthouse CI CLI, Lighthouse CI thường được sử dụng thông qua một trong các phương pháp sau:

Chạy Lighthouse CI trong quá trình tích hợp liên tục
Sử dụng một Hành động GitHub CI để chạy và nhận xét cho mỗi lần kéo yêu cầu
Theo dõi hiệu suất theo thời gian thông qua trang tổng quan do Lighthouse cung cấp Máy chủ.

Tất cả các phương pháp này đều được xây dựng dựa trên Lighthouse CI CLI.

Lựa chọn thay thế cho Lighthouse CI bao gồm tính năng theo dõi hiệu suất của bên thứ ba hoặc tự viết tập lệnh để thu thập dữ liệu hiệu suất trong CI của chúng tôi. Bạn nên cân nhắc sử dụng dịch vụ của bên thứ ba nếu bạn muốn cho phép người khác xử lý việc quản lý máy chủ giám sát hiệu suất của bạn và thiết bị thử nghiệm hoặc nếu bạn muốn tính năng thông báo (chẳng hạn như email hoặc Slack tích hợp) mà không phải tự xây dựng các tính năng này.

Sử dụng Lighthouse CI trên thiết bị

Phần này giải thích cách chạy và cài đặt Lighthouse CI CLI cục bộ và cách định cấu hình lighthouserc.js. Việc chạy Lighthouse CI CLI cục bộ là cách dễ nhất để đảm bảo rằng lighthouserc.js của bạn được định cấu hình chính xác.

Cài đặt Lighthouse CI CLI.
```
npm install -g @lhci/cli
```
Lighthouse CI được định cấu hình bằng cách đặt tệp lighthouserc.js vào thư mục gốc của kho lưu trữ của dự án. Tệp này là bắt buộc và sẽ chứa Lighthouse CI thông tin cấu hình liên quan. Mặc dù Lighthouse CI có thể được định cấu hình thành được dùng mà không có git kho lưu trữ, Các hướng dẫn trong bài viết này giả định rằng kho lưu trữ dự án của bạn được định cấu hình để sử dụng git.
Trong thư mục gốc của kho lưu trữ, hãy tạo một cấu hình lighthouserc.js .
```
touch lighthouserc.js
```

Thêm mã sau vào lighthouserc.js. Mã này trống Cấu hình Lighthouse CI. Bạn sẽ thêm vào cấu hình này trong các bước sau này.

module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};

Mỗi lần Lighthouse CI chạy, Lighthouse sẽ khởi động một máy chủ để phân phát trang web của bạn. Máy chủ này cho phép Lighthouse tải trang web của bạn ngay cả khi không có máy chủ đang chạy. Khi chạy xong Lighthouse CI sẽ tự động tắt máy chủ. Để đảm bảo tính năng phân phát hoạt động chính xác, bạn nên định cấu hình staticDistDir hoặc startServerCommand các thuộc tính.

Nếu trang web của bạn tĩnh, hãy thêm thuộc tính staticDistDir vào ci.collect để cho biết vị trí của tệp tĩnh. Lighthouse CI sẽ sử dụng máy chủ riêng để phân phát các tệp này trong khi kiểm tra trang web của bạn. Nếu trang web không tĩnh, hãy thêm thuộc tính startServerCommand vào ci.collect để cho biết lệnh khởi động máy chủ của bạn. Lighthouse CI sẽ bắt đầu một quy trình máy chủ mới trong quá trình kiểm thử và tắt quy trình đó xuống sau đó.
```
// Static site example
collect: {
  staticDistDir: './public',
}
```
```
// Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}
```
Thêm url vào đối tượng ci.collect để cho biết(các) URL mà Lighthouse CI phải chạy Lighthouse dựa trên. Giá trị của thuộc tính url phải là được cung cấp dưới dạng mảng URL; mảng này có thể chứa một hoặc nhiều URL. Theo Theo mặc định, Lighthouse CI sẽ chạy Lighthouse 3 lần trên mỗi URL.
```
collect: {
  // ...
  url: ['http://localhost:8080']
}
```
Lưu ý: Những URL này phải có thể phân phát bằng máy chủ mà bạn đã định cấu hình trong bước trước đó. Do đó, nếu bạn đang chạy Lighthouse CI cục bộ, những URL này sẽ có thể bao gồm localhost thay vì máy chủ sản xuất.
Thêm target thành đối tượng ci.upload và thiết lập giá trị thành 'temporary-public-storage'. (Các) báo cáo Lighthouse được thu thập bởi Lighthouse CI sẽ được tải lên bộ nhớ công khai tạm thời. Báo cáo này sẽ ở đó trong 7 ngày, rồi tự động bị xoá. Chế độ thiết lập này Google Guide sử dụng "bộ nhớ công cộng tạm thời" vì tốc độ này rất nhanh để thiết lập. Để biết thông tin về những cách khác để lưu trữ báo cáo Lighthouse, hãy tham khảo vào tài liệu.
```
upload: {
  target: 'temporary-public-storage',
}
```
Vị trí lưu trữ của báo cáo sẽ tương tự như sau:
```
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
```
(URL này sẽ không hoạt động vì báo cáo đã bị xoá.)
Chạy Lighthouse CI CLI từ thiết bị đầu cuối bằng lệnh autorun. Thao tác này sẽ chạy Lighthouse 3 lần và tải Lighthouse trung vị lên báo cáo.
```
lhci autorun
```
Nếu bạn đã định cấu hình Lighthouse CI đúng cách, thì việc chạy lệnh này sẽ tạo ra kết quả tương tự như sau:
```
✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Started a web server on port 65324...
Running Lighthouse 3 time(s) on http://localhost:65324/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:65324/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.
```
Bạn có thể bỏ qua thông báo GitHub token not set trong dữ liệu đầu ra của bảng điều khiển. Đáp Bạn chỉ cần mã thông báo GitHub nếu muốn sử dụng Lighthouse CI với GitHub Hành động. Cách thiết lập Hành động GitHub sẽ được giải thích ở phần sau của bài viết này.

Nhấp vào đường liên kết trong kết quả bắt đầu bằng https://storage.googleapis.com... sẽ đưa bạn đến báo cáo Lighthouse tương ứng với trung vị mà Lighthouse chạy.

Bạn có thể ghi đè các giá trị mặc định mà autorun sử dụng thông qua dòng lệnh hoặc lighthouserc.js Ví dụ: cấu hình lighthouserc.js bên dưới cho biết cần thu thập 5 lần chạy Lighthouse mỗi lần autorun thực thi.

Cập nhật lighthouserc.js để sử dụng thuộc tính numberOfRuns:

module.exports = {
    // ...
    collect: {
      numberOfRuns: 5
    },
  // ...
  },
};

Chạy lại lệnh autorun:

lhci autorun

Đầu ra của thiết bị đầu cuối sẽ cho thấy Lighthouse đã chạy 5 lần thay vì so với 3 thành phần mặc định:

✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Automatically determined ./dist as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.

Started a web server on port 64444...
Running Lighthouse 5 time(s) on http://localhost:64444/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Run #4...done.
Run #5...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:64444/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.

Để tìm hiểu về các lựa chọn cấu hình khác, hãy tham khảo Lighthouse CI cấu hình .

Thiết lập quy trình CI để chạy Lighthouse CI

Bạn có thể dùng Lighthouse CI với công cụ CI mà bạn yêu thích. Bài viết Định cấu hình CI của bạn Nhà cung cấp trong tài liệu Lighthouse CI chứa các mã mẫu cho biết cách tích hợp Lighthouse CI vào tệp cấu hình của các công cụ CI phổ biến. Cụ thể, các mã mẫu này cho biết cách chạy Lighthouse CI để thu thập đo lường hiệu suất trong quá trình CI.

Bạn nên bắt đầu sử dụng Lighthouse CI để thu thập kết quả đo lường hiệu suất nhờ tính năng theo dõi hiệu suất. Tuy nhiên, người dùng nâng cao có thể muốn thực hiện một bước và sử dụng Lighthouse CI để tạo bản dựng không thành công nếu không đáp ứng các yêu cầu được xác định trước chẳng hạn như vượt qua các bài kiểm tra cụ thể của Lighthouse hoặc đáp ứng tất cả hiệu suất ngân sách. Hành vi này được định cấu hình thông qua assert thuộc tính của tệp lighthouserc.js.

Lighthouse CI hỗ trợ ba cấp độ xác nhận:

off: bỏ qua câu nhận định
warn: lỗi in sang stderr
error: lỗi in sang stderr và thoát Lighthouse CI bằng giá trị khác 0 thoát mã

Dưới đây là ví dụ về cấu hình lighthouserc.js bao gồm xác nhận. Công cụ này đặt câu nhận định cho điểm số về hiệu suất của Lighthouse và danh mục hỗ trợ tiếp cận. Để thử tính năng này, hãy thêm các câu nhận định dưới đây vào tệp lighthouserc.js, sau đó chạy lại Lighthouse CI.

module.exports = {
  ci: {
    collect: {
      // ...
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 1}],
        'categories:accessibility': ['error', {minScore: 1}]
      }
    },
    upload: {
      // ...
    },
  },
};

Kết quả đầu ra của bảng điều khiển do bảng điều khiển tạo ra có dạng như sau:

Ảnh chụp màn hình một thông báo cảnh báo do Lighthouse CI tạo

Để biết thêm thông tin về câu nhận định CI của Lighthouse, hãy tham khảo tài liệu.

Thiết lập một Hành động trên GitHub để chạy Lighthouse CI

Bạn có thể sử dụng GitHub Action để chạy Lighthouse CI. Thao tác này sẽ tạo một báo cáo Lighthouse mới mỗi khi một mã thì thay đổi sẽ được đẩy tới bất kỳ nhánh nào của kho lưu trữ GitHub. Sử dụng kết hợp có trạng thái kiểm tra để hiển thị các kết quả này trong mỗi yêu cầu lấy dữ liệu.

Ảnh chụp màn hình kiểm tra trạng thái trên GitHub

Trong gốc của kho lưu trữ, hãy tạo một thư mục có tên là .github/workflows. Chiến lược phát hành đĩa đơn quy trình công việc cho dự án của bạn sẽ nằm trong thư mục này. Quy trình làm việc là quá trình chạy tại một thời điểm xác định trước (ví dụ: khi mã được đẩy) và được bao gồm một hoặc nhiều thao tác.
```
mkdir .github
mkdir .github/workflows
```
Trong .github/workflows, hãy tạo một tệp có tên lighthouse-ci.yaml. Tệp này sẽ lưu giữ cấu hình cho một quy trình mới.
```
touch lighthouse-ci.yaml
```

Thêm văn bản sau vào lighthouse-ci.yaml.

name: Build project and run Lighthouse CI
on: [push]
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - name: npm install
        run: |
          npm install
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.3.x
          lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"

Cấu hình này thiết lập một quy trình công việc bao gồm một công việc duy nhất sẽ chạy bất cứ khi nào mã mới được đẩy vào kho lưu trữ. Công việc này có 4 bước:

Xem kho lưu trữ mà Lighthouse CI sẽ chạy dựa trên
Cài đặt và định cấu hình Nút
Cài đặt các gói npm bắt buộc
Chạy Lighthouse CI và tải kết quả lên bộ nhớ công khai tạm thời.

Xác nhận những thay đổi này và đẩy chúng lên GitHub. Nếu bạn đã làm theo đúng các bước ở trên, việc đẩy mã lên GitHub sẽ kích hoạt chạy quy trình làm việc mà bạn vừa thêm.
Để xác nhận Lighthouse CI đã kích hoạt và xem báo cáo tạo, hãy chuyển đến thẻ Hành động của dự án. Bạn sẽ thấy Quy trình công việc Xây dựng dự án và Run Lighthouse CI được liệt kê trong phần cam kết gần đây.

Bạn có thể chuyển đến báo cáo Lighthouse tương ứng với một cam kết cụ thể trong thẻ Hành động. Nhấp vào cam kết, nhấp vào Lighthouse CI sau đó mở rộng kết quả của bước chạy Lighthouse CI.

Bạn vừa thiết lập một Hành động trên GitHub để chạy Lighthouse CI. Cách này sẽ cao nhất hữu ích khi được dùng cùng với trạng thái trên GitHub kiểm tra.

Thiết lập quy trình kiểm tra trạng thái trên GitHub

Kiểm tra trạng thái, nếu được định cấu hình, là một thông báo xuất hiện trên mọi PR và thường bao gồm những thông tin như kết quả thử nghiệm hoặc thành công của một bản dựng.

Ảnh chụp màn hình phần "Settings" (Cài đặt) trên GitHub phím tab

Các bước bên dưới sẽ giải thích cách thiết lập tính năng kiểm tra trạng thái cho Lighthouse CI.

Truy cập vào Ứng dụng GitHub CI rồi nhấp vào Định cấu hình.
(Không bắt buộc) Nếu bạn là thành viên của nhiều tổ chức trên GitHub, hãy chọn tổ chức sở hữu kho lưu trữ mà bạn muốn dùng Lighthouse Khoảng tin cậy (CI)
Chọn All Repository (Tất cả kho lưu trữ) nếu bạn muốn bật Lighthouse CI trong tất cả kho lưu trữ hoặc chọn Chỉ chọn kho lưu trữ nếu bạn chỉ muốn sử dụng tệp đó trong các kho lưu trữ cụ thể, rồi chọn các kho lưu trữ đó. Sau đó nhấp vào Cài đặt và Uỷ quyền.
Sao chép mã thông báo mà bạn thấy. Bạn sẽ dùng địa chỉ này trong bước tiếp theo.
Để thêm mã thông báo, hãy chuyển đến trang Settings (Cài đặt) trên GitHub kho lưu trữ, hãy nhấp vào Bí mật, sau đó nhấp vào Thêm mã bí mật mới.
Đặt trường Name (Tên) thành LHCI_GITHUB_APP_TOKEN rồi đặt Value (Giá trị) vào mã thông báo mà bạn đã sao chép ở bước cuối cùng, rồi nhấp vào nút Thêm bí mật.
Chuyển đến tệp lighthouse-ci.yaml rồi thêm mã bí mật mới cho môi trường vào tệp "run Lighthouse CI" .

-           name: run Lighthouse CI
            run: |
              npm install -g @lhci/cli@0.3.x
              lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+            env:
+              LHCI_GITHUB_APP_TOKEN: $

Tính năng kiểm tra trạng thái đã sẵn sàng để sử dụng. Để kiểm tra, hãy tạo một quy trình lấy dữ liệu mới yêu cầu hoặc thực hiện một cam kết cho một yêu cầu lấy dữ liệu hiện có.

Thiết lập Máy chủ CI Lighthouse

Máy chủ Lighthouse CI cung cấp một trang tổng quan để khám phá dữ liệu trong quá khứ Báo cáo Lighthouse. Nó cũng có thể đóng vai trò là kho dữ liệu riêng tư, dài hạn cho Báo cáo Lighthouse.

Ảnh chụp màn hình trang tổng quan Lighthouse CI Server

Ảnh chụp màn hình so sánh 2 báo cáo Lighthouse trong Lighthouse CI Server

Chọn các cam kết để so sánh.
Số lượng điểm số Lighthouse đã thay đổi giữa 2 lần thay đổi.
Phần này chỉ trình bày các chỉ số đã thay đổi giữa 2 lần thay đổi.
Các mức hồi quy được đánh dấu màu hồng.
Các điểm cải tiến được đánh dấu bằng màu xanh dương.

Lighthouse CI Server phù hợp nhất với những người dùng cảm thấy thoải mái khi triển khai và quản lý cơ sở hạ tầng của riêng mình.

Để biết thông tin về cách thiết lập máy chủ Lighthouse CI, bao gồm cả các công thức cho sử dụng Heroku và Docker để triển khai, hãy tham khảo hướng dẫn.

Tìm hiểu thêm

Kho lưu trữ GitHub CI của Lighthouse