Tweet
Tweet

Slide 1

Slide 1 text

Relative CI が気になっている話 Relative CI が気になっている話 Build Battle Saga / Futoshi Iwashita

Slide 2

Slide 2 text

自己紹介 自己紹介 岩下 太 (@jaxx2104) 株式会社リクルート Front-end engineer

Slide 3

Slide 3 text

みなさんはパフォーマンス指標と計測を みなさんはパフォーマンス指標と計測を どのように設定してますか どのように設定してますか

Slide 4

Slide 4 text

web.dev で紹介されている例 web.dev で紹介されている例

Slide 5

Slide 5 text

web.dev で紹介されている例 web.dev で紹介されている例 webpack の performance 機能を使う bundlesize を使う Lighthouse CI を使う これらをCI実行することで指標を設けてます

Slide 6

Slide 6 text

心の声 心の声 運用できるのか？ 運用できるのか？ 運用できるのか？ 運用している人は後押ししてくれるツイートをまってます

Slide 7

Slide 7 text

Relative CI Relative CI

Slide 8

Slide 8 text

実際のビルドファイル https://github.com/jaxx2104/blog/pull/486/ les

Slide 9

Slide 9 text

Relative CI の機能 Relative CI の機能 Monitoring Github integration Build analysis

Slide 10

Slide 10 text

bundle-stats bundle-stats https://relative-ci.com/tools/webpack-bundle-stats/demo-multiple-jobs.html

Slide 11

Slide 11 text

compare webpack compare webpack https://compare.relative-ci.com/webpack

Slide 12

Slide 12 text

compare lighthouse compare lighthouse https://compare.relative-ci.com/lighthouse

Slide 13

Slide 13 text

compare browsertime compare browsertime https://compare.relative-ci.com/browsertime

Slide 14

Slide 14 text

Video Compare https://video-compare.relative-ci.com/

Slide 15

Slide 15 text

設定方法 設定方法 https://relative-ci.com/documentation/setup

Slide 16

Slide 16 text

最後に 最後に パフォーマンス指標を継続的に監視できる 面倒を見てくれる需要は高そう まだベータ版なのでこれからに期待

Slide 17

Slide 17 text

ありがとうございました！ ありがとうございました！