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

by rakus frontend

Slide 1

Slide 1 text

ReactͷύϑΥʔϚϯεվળྫ

Slide 2

Slide 2 text

ࠓ೔ͷ͓୊ https://web.dev/articles/rail?hl=ja

Slide 3

Slide 3 text

RAILϞσϧͱ͸ RAIL͸Googleࣾͷ։ൃऀͰ͋Δ Ilya Grigorik ࢯ͕ఏ এͨ͠ύϑΥʔϚϯεϞσϧͰ͢ɻ  ग़యɿWebϑϩϯτΤϯυϋΠύϑΥʔϚϯενϡʔχϯά RAIL͸ɺResponse, Animation, Idle, Loadͷ֤୯ޠͷ ಄จࣈΛऔ໊ͬͯ෇͚ΒΕ·ͨ͠ɻ RAIL͸ɺϢʔβʔΛத৺ͱͨ͠ύϑΥʔϚϯεϞσϧ Λඪᒗ͠·͢ɻ

Slide 4

Slide 4 text

ࠓ೔ͷ͓୊ https://web.dev/articles/rail?hl=ja 👉

Slide 5

Slide 5 text

Responseͱ͸ Response͸ɺϢʔβʔ͕ԿΒ͔ͷΞΫγϣϯʹର͠ ͯ΢Σϒϖʔδ͕ϢʔβʔΠϯλʔϑΣΠε্ͷมԽ ΛҾ͖ىͯ͜͠ɺԠ౴͢Δ·Ͱͷ࣌ؒΛࢦ͠·͢ɻ 

Slide 6

Slide 6 text

Responseͱ͸

Slide 7

Slide 7 text

Responseͱ͸ 👉 Googleఏএ໨ඪ஋

Slide 8

Slide 8 text

Responseͱ͸ 👉 ݱ࣮తͳ໨ඪ

Slide 9

Slide 9 text

ϥΫεϓϩμΫτʹ͓͚Δ໰୊ 500ߦͷςʔϒϧ

Slide 10

Slide 10 text

ϥΫεϓϩμΫτʹ͓͚Δ໰୊ (ms) 1ճ໨ 2ճ໨ 3ճ໨ 4ճ໨ 5ճ໨ 6ճ໨ 7ճ໨ 8ճ໨ 9ճ໨ 10ճ໨ res 2306 2698 2523 3122 2546 2472 2382 2872 2619 2465 2659ms 75ύʔηϯλΠϧ

Slide 11

Slide 11 text

ϘτϧωοΫௐࠪ React Developer Tools

Slide 12

Slide 12 text

ෆཁͳϨϯμϦϯάͷ࡟ݮ ίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞Εͨཧ༝Λ  ϩάग़ྗͯ͘͠ΕΔϥΠϒϥϦ https://github.com/welldone-software/why-did-you-render

Slide 13

Slide 13 text

ෆཁͳϨϯμϦϯάͷ࡟ݮ install vite.config.ts main.tsx

Slide 14

Slide 14 text

ෆཁͳϨϯμϦϯάͷ࡟ݮ

Slide 15

Slide 15 text

ෆཁͳϨϯμϦϯάͷ࡟ݮ ؔ਺΍ςʔϒϧηϧίϯϙʔωϯτͷϝϞԽΛߦ͏

Slide 16

Slide 16 text

ෆཁͳϨϯμϦϯάͷ࡟ݮ ͪΐͬͱͨ͠ίʔυͷॻ͖ํͷҧ͍Ͱ  ϝϞԽ͕ޮ͔ͳ͘ͳΔͨΊ஫ҙ͢Δ 👎 👍

Slide 17

Slide 17 text

ෆཁͳϨϯμϦϯάͷ࡟ݮ ͪΐͬͱͨ͠ίʔυͷॻ͖ํͷҧ͍Ͱ  ϝϞԽ͕ޮ͔ͳ͘ͳΔͨΊ஫ҙ͢Δ

Slide 18

Slide 18 text