Reactのパフォーマンス改善例

Transcript

1. ReactͷύϑΥʔϚϯεվળྫ
2. ࠓ೔ͷ͓୊ https://web.dev/articles/rail?hl=ja
3. RAILϞσϧͱ͸ RAIL͸Googleࣾͷ։ൃऀͰ͋Δ Ilya Grigorik ࢯ͕ఏ এͨ͠ύϑΥʔϚϯεϞσϧͰ͢ɻ
 ग़యɿWebϑϩϯτΤϯυϋΠύϑΥʔϚϯενϡʔχϯά RAIL͸ɺResponse, Animation, Idle, Loadͷ֤୯ޠͷ ಄จࣈΛऔ໊ͬͯ෇͚ΒΕ·ͨ͠ɻ RAIL͸ɺϢʔβʔΛத৺ͱͨ͠ύϑΥʔϚϯεϞσϧ Λඪᒗ͠·͢ɻ
4. ࠓ೔ͷ͓୊ https://web.dev/articles/rail?hl=ja 👉
5. Responseͱ͸ Response͸ɺϢʔβʔ͕ԿΒ͔ͷΞΫγϣϯʹର͠ ͯ΢Σϒϖʔδ͕ϢʔβʔΠϯλʔϑΣΠε্ͷมԽ ΛҾ͖ىͯ͜͠ɺԠ౴͢Δ·Ͱͷ࣌ؒΛࢦ͠·͢ɻ

6. Responseͱ͸
7. Responseͱ͸ 👉 Googleఏএ໨ඪ஋
8. Responseͱ͸ 👉 ݱ࣮తͳ໨ඪ
9. ϥΫεϓϩμΫτʹ͓͚Δ໰୊ 500ߦͷςʔϒϧ
10. ϥΫεϓϩμΫτʹ͓͚Δ໰୊ (ms) 1ճ໨ 2ճ໨ 3ճ໨ 4ճ໨ 5ճ໨ 6ճ໨ 7ճ໨ 8ճ໨ 9ճ໨ 10ճ໨ res 2306 2698 2523 3122 2546 2472 2382 2872 2619 2465 2659ms 75ύʔηϯλΠϧ
11. ϘτϧωοΫௐࠪ React Developer Tools
12. ෆཁͳϨϯμϦϯάͷ࡟ݮ ίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞Εͨཧ༝Λ
 ϩάग़ྗͯ͘͠ΕΔϥΠϒϥϦ https://github.com/welldone-software/why-did-you-render
13. ෆཁͳϨϯμϦϯάͷ࡟ݮ install vite.config.ts main.tsx
14. ෆཁͳϨϯμϦϯάͷ࡟ݮ
15. ෆཁͳϨϯμϦϯάͷ࡟ݮ ؔ਺΍ςʔϒϧηϧίϯϙʔωϯτͷϝϞԽΛߦ͏
16. ෆཁͳϨϯμϦϯάͷ࡟ݮ ͪΐͬͱͨ͠ίʔυͷॻ͖ํͷҧ͍Ͱ
 ϝϞԽ͕ޮ͔ͳ͘ͳΔͨΊ஫ҙ͢Δ 👎 👍
17. ෆཁͳϨϯμϦϯάͷ࡟ݮ ͪΐͬͱͨ͠ίʔυͷॻ͖ํͷҧ͍Ͱ
 ϝϞԽ͕ޮ͔ͳ͘ͳΔͨΊ஫ҙ͢Δ
18. ෆཁͳϨϯμϦϯάͷ࡟ݮ
19. ෆཁͳϨϯμϦϯάͷ࡟ݮ վળલ վળޙ
20. ύϑΥʔϚϯεൺֱ (ms) 1ճ໨ 2ճ໨ 3ճ໨ 4ճ໨ 5ճ໨ 6ճ໨ 7ճ໨ 8ճ໨ 9ճ໨ 10ճ໨ վળલ 2306 2698 2523 3122 2546 2472 2382 2872 2619 2465 վળޙ 465 481 503 562 561 479 545 483 498 491 2659ms 524ms 🎉
21. վળલ վળޙ
22. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠