Lighthouse Github App

前言

Lighthouse 是谷歌 Web 開發「四件套」之一。

經常使用的性能評測工具 PageSpeed 內部就是用 Lighthouse 實現的。

本文將說明如何安裝使用 Lighthouse Github App，藉助 Travis CI，把 Lighthouse 引入開源項目的 Pull Reuqest 工做流中，達到性能分析自動化的效果。

本文假設讀者對 Travis CI 有必定的瞭解 ，若是沒有，能夠查看 Travis CI 教程。

說明

分析單頁面

Lighthouse 是針對靜態頁面進行分析的，所以分析前須要先構建前端應用，生成 html。

假設前端應用構建命令爲 yarn build , 生成的靜態文件目錄爲 static ，只在 master 分支觸發構建。

則 Travis CI 參考配置以下，關鍵點是：

• 安裝 @lhci/cli
• 安裝 chrome 附件

• 運行 lhci 

  • 設置靜態文件目錄
  • 設置要測試的頁面(若是是 index.html 則能夠省略)

branches:
  only:
    - master
language: node_js
node_js:
- lts/*
before_install:
- yarn global add @lhci/cli
install:
- yarn
- yarn build
script:
- lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=./static
addons:
  chrome: stable
cache: yarn

複製上面的代碼，放到 .travis.yml 裏，並提交到倉庫中。

點擊：https://github.com/apps/lighthouse-ci/installations/new

受權後，保存 token

進入 Travis CI，添加環境變量：LHCI_GITHUB_APP_TOKEN，值爲上面保存的 token

向 master 提交 PR，便可

分析多頁面

分析 Travis CI 的日誌

能夠得知，lighthouse 會啓動內置一個隨機端口的 web server，經過配置文件裏指定的靜態文件夾，訪問到 index.html。測試了三次後，把診斷結果上傳到臨時的雲存儲空間中。

假設如今想測試的不是 index.html，或不止測試一個頁面，又該如何操做？

能夠經過 collect.url=http://localhost/xxx 來配置，示例以下：

lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=./ --collect.url=http://localhost/static --collect.url=http://localhost/another-page

注意此時不須要指定端口號

案例

看看實際項目 FEMessage/create-nuxt-app 是怎麼作的。

create-nuxt-app 在 CI 時共會生成三個目錄，每個目錄構建後都是一個spa，它們經過同一個 index.html 做爲統一入口。也即，咱們要評估的不是做爲統一入口的 index.html，而是三個 spa 的首頁。

另外，咱們只會在 dev 分支進行 lhci 的性能評估，master 是用於發佈npm、生成源碼zip包的。

下面是 .travis.yml

branches:
  only:
    - master
    - dev
language: node_js
node_js:
- lts/*
install:
- yarn --frozen-lockfile
script:
  - yarn test
  - yarn generate
  # https://stackoverflow.com/questions/37544306/travis-different-script-for-different-branch
  - test "$TRAVIS_BRANCH" = "dev" && yarn build && ./lhci.sh || echo skip
  - test "$TRAVIS_BRANCH" = "master" &&  yarn zip || echo skip
addons:
  chrome: stable
deploy:
  - provider: script
    skip_cleanup: true
    script: npx semantic-release
    on:
      branch: master
after_script:
  - ./notify.sh

lhci.sh

#!/bin/sh
yarn global add @lhci/cli

lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=./dist --collect.url=http://localhost/nuxt-element-dashboard --collect.url=http://localhost/nuxt-multiple-spa --collect.url=http://localhost/nuxt-vant

notify.sh

#!/bin/sh
if [ "$TRAVIS_BRANCH" != "master" ]
then
  echo "do not notify cause not on master branch"
  exit 0
fi

if [ "$TRAVIS_TEST_RESULT" != "0" ]
then
  echo "build not success, bye"
  exit 1
fi

GREN_GITHUB_TOKEN=$GITHUB_TOKEN yarn release

結語

Lighthouse 是開源的，也有不少衍生的工具，初次使用，可能學習曲線稍微有些陡峭，建議先從 Lighthouse Github App 入手，先在開源項目中嘗試，有了成功經驗後，後續再用相應的命令行工具，引入內部項目中。

有同窗可能會問，這跟直接使用使用 PageSpeed 進行頁面分析有什麼不一樣呢？

這個問題問題得好。能夠這樣想，使用 PageSpeed 去分析的時候，都是在項目里程碑末期。而使用工具，能夠把性能分析引入到研發流程中間，能夠自動化，並提早發現問題。更關鍵的是，這利於加強團隊的性能優化意識，爲建立性能文化打下基礎。

參考

• lighthouse-ci getting-started
• lighthouse-ci docs