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. Lighthouse CI có thể đượ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 một Hành động GitHub 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 dữ liệu GitHub.
Tạo trang tổng quan về hiệu suất và kho dữ liệu cho các báo cáo Lighthouse.

Tổng quan

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

Chức năng cốt lõi của Lighthouse CI do giao diện dòng lệnh Lighthouse CI cung cấp. (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 nhiều bằng cách truyền thêm cờ hoặc tuỳ chỉnh tệp cấu hình lighthouserc.js của Lighthouse CI.

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, 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 Thao tác Lighthouse CI trên GitHub để chạy và nhận xét cho mỗi yêu cầu lấy dữ liệu
Theo dõi hiệu suất theo thời gian thông qua trang tổng quan do Máy chủ Lighthouse 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 lựa chọn thay thế cho Lighthouse CI bao gồm các dịch vụ theo dõi hiệu suất của bên thứ ba hoặc tự viết tập lệnh của riêng bạn để thu thập dữ liệu hiệu suất trong quy 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ử của bạn, hoặc nếu bạn muốn các tính năng thông báo (chẳng hạn như email hoặc tích hợp Slack) mà không cần phải tự xây dựng các tính năng này.

Sử dụng Lighthouse CI cục bộ

Phần này giải thích cách chạy và cài đặt Lighthouse CI CLI cục bộ cũng như cách định cấu hình lighthouserc.js. Chạy Lighthouse CI CLI cục bộ là cách dễ dàng 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ữ 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 để sử dụng Lighthouse CI 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 ở các bước sau.

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

Mỗi lần Lighthouse CI chạy, hệ thống 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 Lighthouse CI chạy xong, hệ thống sẽ tự động tắt máy chủ. Để đảm bảo tính năng phân phát hoạt động đúng cách, bạn nên định cấu hình các thuộc tính staticDistDir hoặc startServerCommand.

Nếu trang web của bạn ở dạng 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 của mình để 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 của bạn không ở trạng thái 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ủ. Lighthouse CI sẽ bắt đầu một quy trình máy chủ mới trong quá trình thử nghiệm và tắt 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 máy chủ mà bạn đã định cấu hình phân phát ở bước trước. Do đó, nếu bạn đang chạy Lighthouse CI cục bộ, các URL này có thể phải bao gồm localhost thay vì máy chủ lưu trữ chính thức.
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 cộng tạm thời. Báo cáo sẽ ở đó trong 7 ngày và sau đó sẽ 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ớ công khai tạm thời" vì quá trình thiết lập nhanh chóng. Để biết thông tin về những cách lưu trữ báo cáo Lighthouse khác, hãy tham khảo tài liệu này.
```
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ừ cửa sổ dòng lệnh bằng lệnh autorun. Thao tác này sẽ chạy Lighthouse 3 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 chính xác Lighthouse CI, 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 kết quả 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 một Hành động trên GitHub. Chúng tôi sẽ giải thích cách thiết lập một Hành động trên GitHub ở 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 lần chạy Lighthouse trung gian.

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 sẽ thu thập 5 lượt chạy Lighthouse mỗi khi thực thi autorun.

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 thiết bị đầu cuối sẽ cho thấy Lighthouse đã được chạy 5 lần thay vì 3 lần theo 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ể dùng Lighthouse CI với công cụ CI mà bạn yêu thích. Mục Định cấu hình nhà cung cấp CI trong tài liệu về Lighthouse CI chứa các mã mẫu cho thấy cách tích hợp Lighthouse CI vào các 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 thông tin đo lường hiệu suất trong quy trình CI.

Bạn nên sử dụng Lighthouse CI để thu thập thông tin đo lường hiệu suất để bắt đầu theo dõi 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 để tạo các bản dựng không đạt yêu cầu nếu họ 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 Lighthouse cụ thể hoặc đáp ứng tất cả ngân sách 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 câu nhận định:

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

Dưới đây là ví dụ về cấu hình lighthouserc.js bao gồm các câu nhận định. Công cụ này đặt 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. Để dùng thử, hãy thêm các câu nhận định 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: {
      // ...
    },
  },
};

Đầu ra bảng điều khiển mà dịch vụ này tạo ra sẽ 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âu nhận định Lighthouse CI, hãy tham khảo tài liệu này.

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

Bạn có thể sử dụng một GitHub Action (Hành động GitHub) để chạy Lighthouse CI. Thao tác này sẽ tạo một báo cáo Lighthouse mới mỗi khi có thay đổi về mã được đẩy đến 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 quá trình kiểm tra trạng thái để cho thấy 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. Các quy trình công việc cho dự án sẽ nằm trong thư mục này. Quy trình công việc là quy trình chạy vào thời gian xác định trước (ví dụ: khi đẩy mã) 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 lighthouse-ci.yaml. Tệp này sẽ lưu giữ cấu hình cho quy trình làm 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 làm 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 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.

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, thì việc đẩy mã lên GitHub sẽ kích hoạt quá trình chạy quy trình 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 đã tạo, hãy chuyển đến thẻ Actions (Thao tác) trong dự án của bạn. Bạn sẽ thấy quy trình làm việc Build project and Run Lighthouse CI (Tạo dự án và chạy Lighthouse CI) được liệt kê trong cam kết gần đây nhất.

Bạn có thể chuyển đến báo cáo Lighthouse tương ứng với một cam kết cụ thể từ thẻ Actions (Thao tác). Nhấp vào cam kết, nhấp vào bước quy trình làm việc Lighthouse CI, sau đó mở rộng kết quả của bước mà Lighthouse CI đã chạy.

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

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

Yêu cầu 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 nội dung PR và thường bao gồm các thông tin như kết quả kiểm thử hoặc mức độ thành công của một bản dựng.

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

Các bước dưới đây giải thích cách thiết lập quy trình 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 Đị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 mọi 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 kho lưu trữ đó trong các kho lưu trữ cụ thể, sau đó chọn các kho lưu trữ đó. Sau đó, nhấp vào Cài đặt và cho phép.
Sao chép mã thông báo hiển thị. Bạn sẽ dùng đường liên kết 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) của kho lưu trữ GitHub, nhấp vào Secrets (Khoá bí mật), sau đó nhấp vào Add a new Secret (Thêm khoá bí mật 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 rồi thêm mã bí mật về môi trường mới vào lệnh "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: $

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

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

Máy chủ Lighthouse CI cung cấp một trang tổng quan để khám phá báo cáo Lighthouse trước đây. Tệp này cũng có thể hoạt động như một 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 của máy chủ Lighthouse CI

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

Chọn các thay đổi cần so sánh.
Lượng điểm của Lighthouse đã thay đổi giữa hai thay đổi.
Phần này chỉ hiển thị các chỉ số đã thay đổi giữa hai thay đổi.
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ủ Lighthouse CI 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ả thông tin hướng dẫn cách sử dụng Heroku và Docker để triển khai, hãy tham khảo instructions này.

Tìm hiểu thêm

Kho lưu trữ GitHub CI