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ộ công cụ để sử dụng Lighthouse trong quá trình tích hợp liên tục. Bạn có thể tích hợp Lighthouse CI 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à kiểm tra trạng thái cho Lighthouse CI. Thao tác này sẽ tự động hiển thị kết quả Lighthouse trên các yêu cầu lấy 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 để 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ề hiệu suất của một trang web tại thời điểm chạy; Lighthouse CI cho biết những phát hiện này đã thay đổi như thế nào theo thời gian. Bạn có thể sử dụng tính năng này để xác định tác động của các thay đổi mã cụ thể hoặc đảm bảo đáp ứng ngưỡng hiệu suất trong các quy trình tích hợp liên tục. Mặc dù việc theo dõi hiệu suất là trường hợp sử dụng phổ biến nhất cho Lighthouse CI, nhưng bạn có thể sử dụng tính năng này để theo dõi các khía cạnh khác của báo cáo Lighthouse, chẳng hạn như SEO hoặc khả năng hỗ trợ tiếp cận.

Giao diện dòng lệnh Lighthouse CI cung cấp chức năng cốt lõi của Lighthouse CI. (Lưu ý: Đây là một công cụ riêng biệt với Lighthouse CLI.) Lighthouse CI CLI cung cấp một bộ lệnh để sử dụng Lighthouse CI. Ví dụ: lệnh autorun thực thi nhiều lần chạy Lighthouse, xác định báo cáo Lighthouse trung bình và tải báo cáo lên để lưu trữ. Bạn có thể tuỳ chỉnh hành vi này bằng cách truyền các cờ bổ sung 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 đóng gói trong Lighthouse CI CLI, nhưng 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 của Lighthouse chạy và nhận xét trên mọi yêu cầu kéo
Theo dõi hiệu suất theo thời gian thông qua trang tổng quan do Lighthouse Server cung cấp.

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

Các giải pháp thay thế cho Lighthouse CI bao gồm các dịch vụ giám sát hiệu suất của bên thứ ba hoặc viết tập lệnh của riêng bạn để thu thập dữ liệu hiệu suất trong quá trình CI. Bạn nên cân nhắc sử dụng dịch vụ của bên thứ ba nếu muốn người khác xử lý việc quản lý máy chủ giám sát hiệu suất và thiết bị kiểm thử, hoặc nếu bạn muốn có các chức năng thông báo (chẳng hạn như tích hợp email hoặc Slack) mà không cần 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 cục bộ Lighthouse CI CLI cũng như cách định cấu hình lighthouserc.js. 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
```
Bạn có thể định cấu hình Lighthouse CI bằng cách đặt tệp lighthouserc.js vào thư mục gốc của kho lưu trữ dự án. Tệp này là bắt buộc và sẽ chứa thông tin cấu hình liên quan đến Lighthouse CI. Mặc dù bạn có thể định cấu hình Lighthouse CI để sử dụng mà không cần kho lưu trữ git, nhưng 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 tệp cấu hình lighthouserc.js.
```
touch lighthouserc.js
```
Thêm mã sau vào lighthouserc.js. Mã này là một cấu hình Lighthouse CI trống. Bạn sẽ thêm vào cấu hình này trong các bước sau.
```
module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};
```
Mỗi khi chạy, Lighthouse CI 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ủ nào khác đ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 thuộc tính staticDistDir hoặc startServerCommand.

Nếu trang web của bạn là trang web tĩnh, hãy thêm thuộc tính staticDistDir vào đối tượng ci.collect để cho biết vị trí của các 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 thử trang web của bạn. Nếu trang web của bạn không tĩnh, hãy thêm thuộc tính startServerCommand vào đối tượng 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 đó sau đó.
```
// Static site example
collect: {
  staticDistDir: './public',
}
```
```
// Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}
```
Thêm thuộc tính url vào đối tượng ci.collect để cho biết (các) URL mà Lighthouse CI sẽ chạy Lighthouse. Bạn phải cung cấp giá trị của thuộc tính url dưới dạng một mảng URL; mảng này có thể chứa một hoặc nhiều URL. Theo mặc định, Lighthouse CI sẽ chạy Lighthouse ba lần cho mỗi URL.
```
collect: {
  // ...
  url: ['http://localhost:8080']
}
```
Lưu ý: Các URL này phải có thể phân phát được bằng máy chủ mà bạn đã định cấu hình ở bước trước. Do đó, nếu bạn đang chạy Lighthouse CI cục bộ, các URL này có thể bao gồm localhost thay vì máy chủ phát hành công khai.
Thêm thuộc tính target vào đối tượng ci.upload và đặt giá trị thành 'temporary-public-storage'. (Các) báo cáo Lighthouse do Lighthouse CI thu thập sẽ được tải lên bộ nhớ công khai tạm thời. Báo cáo sẽ lưu tại đó trong 7 ngày rồi tự động bị xoá. Hướng dẫn thiết lập này sử dụng tuỳ chọn tải lên "bộ nhớ tạm thời công khai" vì cách này nhanh chóng. Để biết thông tin về các cách lưu trữ báo cáo Lighthouse khác, hãy tham khả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ừ dòng lệnh bằng lệnh autorun. Thao tác này sẽ chạy Lighthouse ba lần và tải báo cáo Lighthouse trung bình lên.
```
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ẽ cho 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. Bạn chỉ cần mã thông báo GitHub nếu muốn sử dụng Lighthouse CI với Hành động GitHub. 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.

Khi nhấp vào đường liên kết trong dữ liệu đầu ra bắt đầu bằng https://storage.googleapis.com..., bạn sẽ được đưa đế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 rằng bạn nên thu thập 5 lần chạy Lighthouse mỗi khi 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

Kết quả đầu ra của dòng lệnh sẽ cho thấy Lighthouse đã được chạy 5 lần thay vì 3 lầ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 tuỳ chọn cấu hình khác, hãy tham khảo tài liệu về cấu hình Lighthouse CI.

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

Bạn có thể sử dụng Lighthouse CI với công cụ CI mà bạn yêu thích. Phần Định cấu hình trình cung cấp CI của 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 các phép đo hiệu suất trong quá trình CI.

Bạn nên bắt đầu theo dõi hiệu suất bằng Lighthouse CI để thu thập kết quả đo lường hiệu suất. Tuy nhiên, người dùng nâng cao có thể muốn tiến thêm một bước và sử dụng Lighthouse CI để xử lý các bản dựng không thành công nếu không đáp ứng các tiêu chí đượ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 mọi ngân sách về hiệu suất. Hành vi này được định cấu hình thông qua thuộc tính assert của tệp lighthouserc.js.

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

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

Dưới đây là ví dụ về cấu hình lighthouserc.js bao gồm lời xác nhận. Tệp này đặt các câu nhận định cho điểm số của các danh mục hiệu suất và hỗ trợ tiếp cận của Lighthouse. Để thử nghiệm điều này, hãy thêm các câu nhận định hiển thị bên dưới 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 trên bảng điều khiển mà lệnh này tạo ra có dạng như sau:

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

Để biết thêm thông tin về các 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ể 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 thay đổi về mã được đẩy vào bất kỳ nhánh nào của kho lưu trữ GitHub. Hãy sử dụng tính năng này cùng với tính năng kiểm tra trạng thái để hiển thị các kết quả này trên mỗi yêu cầu kéo.

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

Trong thư mục gốc của kho lưu trữ, hãy tạo một thư mục có tên là .github/workflows. 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 công việc là một quy trình chạy vào một thời điểm đã định trước (ví dụ: khi mã được đẩy) và bao gồm một hoặc nhiều hành động.
```
mkdir .github
mkdir .github/workflows
```
Trong .github/workflows, hãy tạo một tệp có tên là lighthouse-ci.yaml. Tệp này sẽ chứa cấu hình cho một quy trình công việc 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 Node
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.

Cam kết các 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 việc chạy quy trình công việc mà bạn vừa thêm.
Để xác nhận rằng Lighthouse CI đã kích hoạt và xem báo cáo mà Lighthouse CI đã tạo, hãy chuyển đến thẻ Thao tác của dự án. Bạn sẽ thấy quy trình công việc Tạo dự án và Chạy Lighthouse CI được liệt kê trong thay đổi gần đây nhất.

Bạn có thể chuyển đến báo cáo Lighthouse tương ứng với một thay đổi cụ thể trong thẻ Thao tác. Nhấp vào thay đổi, nhấp vào bước quy trình công việc 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. Điều này sẽ hữu ích nhất khi được sử dụng cùng với quy trình kiểm tra trạng thái của GitHub.

Thiết lập tính năng kiểm tra trạng thái GitHub

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

Ảnh chụp màn hình thẻ "Cài đặt" của GitHub

Các bước dưới đây 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 trang Ứng dụng GitHub CI Lighthouse và nhấp vào Configure (Đị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 sử dụng Lighthouse CI.
Chọn 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 một số kho lưu trữ nếu bạn chỉ muốn sử dụng Lighthouse CI trong một số kho lưu trữ cụ thể, sau đó 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 xuất hiện. Bạn sẽ sử dụng nó trong bước tiếp theo.
Để thêm mã thông báo, hãy chuyển đến trang Cài đặt của kho lưu trữ GitHub, nhấp vào Mật khẩu, sau đó nhấp vào Thêm mật khẩu mới.
Đặt trường Name (Tên) thành LHCI_GITHUB_APP_TOKEN và đặt trường Value (Giá trị) thành mã thông báo mà bạn đã sao chép ở bước cuối cùng, sau đó nhấp vào nút Add secret (Thêm khoá bí mật).
Chuyển đến tệp lighthouse-ci.yaml và thêm khoá môi trường mới vào lệnh "run Lighthouse CI" (chạy 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: $

Bạn có thể sử dụng tính năng kiểm tra trạng thái. Để kiểm thử, hãy tạo một yêu cầu kéo mới hoặc đẩy một yêu cầu xác nhận (commit) vào 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ủ CI Lighthouse cung cấp một trang tổng quan để khám phá báo cáo Lighthouse trước đây. Nó cũng có thể đóng vai trò là kho dữ liệu riêng tư, dài hạn cho các 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 hai báo cáo Lighthouse trong Máy chủ CI Lighthouse

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

Máy chủ CI Lighthouse phù hợp nhất với những người dùng tự tin triển khai và quản lý cơ sở hạ tầng của riêng họ.

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

Tìm hiểu thêm

Kho lưu trữ Lighthouse CI trên GitHub