Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
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
ありがとうございました! ありがとうございました!