1 of 36

整合 Lighthouse CI

作為前端應用的效能守門員

​

Kyle Mo@MOPCON 2022

2 of 36

關於我

​

SWE @LINE TAIWAN

Writer＠星巴哥技術週刊

《今晚來點 Web 前端效能優化大補帖！》

莫力全 Kyle Mo

3 of 36

議程大綱

The Introduction of Lighthouse CI

導入經驗談

  • 什麼是 Lighthouse CI ?
  • Architecture of Lighthouse CI
  • How to use it ?
  • Why ? (為什麼要導入 feat.Frontend Infra Team Intro)
  • How ?（如何導入）
  • Problems (導入時遇到的困難)
  • Result (成果)

Conclusion

01

02

03

4 of 36

The Introduction of Lighthouse CI

​

5 of 36

Lighthouse

  • Browser Extension
  • Browser DevTool

6 of 36

  • 透過 Lighthouse 發現效能下降，如何得知是哪一次 commit 造成的 ？

​

  • 能否在部署上線前就發現潛在的效能瓶頸？

​

  • Preview URL for every PR & Run Lighthouse ?

Try Lighthouse CI !

7 of 36

Lighthouse CI

8 of 36

Architecture

Collect

Assertion

Upload

Autorun

.lighthouseci/ on local filesystem

9 of 36

How to use ?

  • lighthouserc.js
  • lighthouserc.json

Config Document

10 of 36

CI Config

11 of 36

Status check

12 of 36

Lighthouse CI

導入經驗談

13 of 36

WHY?

40 + FE Devs

10 + Services

Unified Tech Stack

LINE

14 of 36

Unified Tech Stack

制定各專案間統一開發準則

開發共用 Packages

提升前端應用可觀測性

Web FE Infra Team

JSTF Team

15 of 36

Service 1

Service 2

Service 4

Service 4

JSTF

JSTF Team

seed

seed

seed

seed

lead

16 of 36

Performance – Lighthouse CI

​

​

17 of 36

Renovate

18 of 36

SonarQube

​

19 of 36

SonarQube

​

20 of 36

​

ESLint Config

​

​

SonarQube �Config

NextJS�Config

React & TS Config

Custom Config

21 of 36

Generator (For New Projects)

  • Next.js basic skeleton (create-next-app)
  • ESLint Config align with our custom rules
  • SonarQube basic config
  • Basic Github Actions config
  • Renovate Config
  • Lighthouse CI basic integration

22 of 36

Monitoring

​

23 of 36

Next Steps For JSTF

​

  • Security
  • Web Accessibility
  • CI / CD
  • Improve Monitoring Dashboard
  • Others…

24 of 36

Performance – Lighthouse CI

​

  • No assertion of score X

​

  • Focus on relative score change
  • lhci-compare package
  • Force to Implement Mock API Server

25 of 36

Mock API Server

​

  • ​

MSW

CI Environment

Reference Article

Backend

Frontend

MSW

26 of 36

lhci-compare

​

​

@lhci/server doc

​

27 of 36

@lhci-server Config

​

​

​

Advanced Server Config

28 of 36

@lhci-server API

​

  • GET /projects/:id/builds?limit={limit}
  • GET /projects/:id/builds/:id
  • GET /projects/:id/builds/:id/statistics

29 of 36

Build Data

​

​

​

30 of 36

@lhci-server API

​

  • GET /projects/:id/builds?limit={limit}
  • GET /projects/:id/builds/:id
  • GET /projects/:id/builds/:id/statistics

API List

​

31 of 36

Ancestor API

​

da1dad1

sq1da21

pa6uyd1

23ffa98

PR A

PR B

PR A

PR A

Master ← Branch A

RC Branch ← Branch B

( GET /projects/:id/builds/:id/ancestor )

32 of 36

Process

​

取得 Build List，取出 index 0 為 current build

透過 Github API 取得 base branch 最新的前 10 個 commit hash

遍歷最新的 10 個 commit，看看 Build List 中有沒有 match 的 build，有的話就立即 break 迴圈

分別透過 lhci-server statistic API 取得 current build 與 base commit 的統計資料

進行 compare ，建立 template 並留言至 Pull Request

33 of 36

Result

34 of 36

Shortcoming

  • Lighthouse CI 執行時間稍長，必須挑選重要頁面檢測
  • 分數不穩定 (+-3 為正常波動)
  • 架設 lhci Server 的成本

35 of 36

Value

  • Pull Request 守門員，部署上線前發現可能的效能瓶頸
  • 完整的 Dashboard 觀察各項指標的「趨勢」

36 of 36

Thank you

We Are Hiring !

Slide