Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React製 SPA における パフォーマンスチューニング

React製 SPA における パフォーマンスチューニング

Kento TSUJI

November 23, 2018
Tweet

More Decks by Kento TSUJI

Other Decks in Technology

Transcript

  1. ࣗݾ঺հ • Github: @maxmellon • Twitter: @maxmellon_9039 • ϦΫϧʔτςΫϊϩδʔζ 18೥

    ৽ଔೖࣾ
 ࣾձਓྺ ൒೥ʂʂʂ (Vim ྺ 5೥) • ޷෺: ͏ͲΜ, Vim, pipeline-operator
  2. ϦΫϧʔτʹ͓͚ΔSPA • AirSHIFTͱ͍͏αʔϏε͕͋Δ • γϑτද͕௚ײతʹ࡞ΕΔ • React / Redux +

    BFF (redux-pluto) • Component ਺ ໿600 ݸͱ͍͏େن໛ͳSPA • ௚ײతʹγϑτΛ࡞੒͢ΔͨΊʹ
 υϥοάΞϯυυϩοϓΛ࠾༻
  3. BFF Client API Isomorphic Session Data Notification
 Server Redis FCM

    wrapper React/Redux Fetchr CSR SSR DB Push
 Notification WebSocket OAuth γϑτ
 Ϙʔυ
 ʢ࿈ܞΞϓϦʣ ΞʔΩςΫνϟ
  4. connect 3PPU $PNQPOFOU" DPOOFDU $PNQPOFOU" 3FEVDFS͕
 \
 TUBUF 
 BOZ0CKFDU

    
 ^
 ͯ͠Δ ͜ͷઌ͔ΒมߋΛ఻ୡ ͠ͳ͍Α͏ʹ͢Ε͹͍͍ͷͰ͸ʂ ͕͜͜ࢠʹ఻ୡ͍ͯ͠Δ͔Β
 ࠶ϨϯμϦϯά͕ൃੜͯ͠ΔͷͰ͸
  5. performance.mark(‘A’) doSomeThing() performance.mark(‘B’) preformance.mesure(‘A-B’, ‘A’, ‘B’) ࢖͍ํ • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹

    • ܭଌ͍ͨ͠લޙͰ mark() • measure(<label>, <start>, <end>) Ͱܭଌ ͜ͷίʔυΛ௥هͯ͠ %FW5PPMTͰ ύϑΥʔϚϯεΛܭଌ͢Δ
  6. React 16 ͔Β User Timing API͕ఏڙ • React 16 ͔ΒUser

    Timing API ͕ར༻͞Εͨ • ։ൃ؀ڥͰ͸ DevTools ͰݟΔ͚ͩͰ OK • React ͕ ΠΠΧϯδʹ
 `performance.mark, measure` ͯ͘͠Ε͍ͯΔ
  7. Tree Reconciliation 4$6USVF OFX1SPQTˠ OFX1SPQTˠ 4$6GBMTF 4$6USVF TFU4UBUF OFX1SPQTˠ OFX1SPQTˠ

    SFOEFS SFOEFS 4$6USVF 4$6GBMTF ྘ͷՕॴ͸
 3FDPODJMJBUJPO͕
 ൃੜ͢Δ /P/FFE3FDPODJMJBUJPO /FFE3FDPODJMJBUJPO 4$6TIPVME$PNQPOFOU6QEBUF
  8. Tree Reconciliation 4$6USVF OFX1SPQTˠ OFX1SPQTˠ 4$6GBMTF 4$6USVF TFU4UBUF OFX1SPQTˠ OFX1SPQTˠ

    SFOEFS SFOEFS 4$6USVF 4$6GBMTF ྘ͷՕॴ͸
 3FDPODJMJBUJPO͕
 ൃੜ͢Δ /P/FFE3FDPODJMJBUJPO /FFE3FDPODJMJBUJPO 4$6TIPVME$PNQPOFOU6QEBUF
  9. React ʹ ͓͚Δ LifeCycle • ͦ΋ͦ΋ React ʹ͸ϥΠϑαΠΫϧ͕͋Δ • shouldComponentUpdate

    ͱ͍͏ͷ͸
 ϥΠϑαΠΫϧͷ1ͭ • ੹຿͸ɺࠩ෼ϨϯμϦϯά͕ඞཁ͔Ͳ͏͔ͷ
 ൑ఆΛߦ͏͜ͱ
  10. LifeCycle // version 16 DPOTUSVDUPS SFOEFS DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF DPNQPOFOU8JMM
 6ONPVOU

    6QEBUF3FBDU%0.BOESFGT Mount TIPVME$PNQPOFOU6QEBUF Update Unmount 3FOEFS
 1IBTF $PNNJU
 1IBTF HFU%SJWFE4UBUF'SPN1SPQT HFU4OBQTIPU#FGPSF6QEBUF
  11. LifeCycle // version 16 DPOTUSVDUPS SFOEFS DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF DPNQPOFOU8JMM
 6ONPVOU

    6QEBUF3FBDU%0.BOESFGT Mount TIPVME$PNQPOFOU6QEBUF Update Unmount 3FOEFS
 1IBTF $PNNJU
 1IBTF ͍͕ͭ͜USVFΛ
 ฦͨ͠ͱ͖ͷΈ
 ࠶ϨϯμϦϯά HFU%SJWFE4UBUF'SPN1SPQT HFU4OBQTIPU#FGPSF6QEBUF
  12. LifeCycle // version 16 DPOTUSVDUPS SFOEFS DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF DPNQPOFOU8JMM
 6ONPVOU

    6QEBUF3FBDU%0.BOESFGT Mount TIPVME$PNQPOFOU6QEBUF Update Unmount 3FOEFS
 1IBTF $PNNJU
 1IBTF ͍͕ͭ͜USVFΛ
 ฦͨ͠ͱ͖ͷΈ
 ࠶ϨϯμϦϯά HFU%SJWFE4UBUF'SPN1SPQT HFU4OBQTIPU#FGPSF6QEBUF σϑΥϧτ͸
 ৗʹ5SVFΛฦ٫
  13. Tree Reconciliation 4$6USVF OFX1SPQTˠ OFX1SPQTˠ 4$6GBMTF 4$6USVF TFU4UBUF OFX1SPQTˠ OFX1SPQTˠ

    SFOEFS SFOEFS 4$6USVF 4$6GBMTF ͦ΋ͦ΋໦ߏ଄ খ͘͢͞Ε͹͍͍͡ΌΜ
  14. ͜ͷΞϓϩʔνͷڧΈ • ٕज़తʹ೉͍͠ཁૉ͕͘͢ͳ͍
 ˠ ΊΜͲ͍͚ͩ͘͞ • shouldComponentUpdate ͸࠷ॳ͔Β
 ॻ͔ͳͯ͘΋ྑ͍
 →

    ॏ͘ͳΕ͹ॻ͚͹͍͍ • ίϯϙʔωϯτ͕খ͍͞ͱ props ͕গͳ͍
 → SCU Λॻ͔ͳͯ͘΋ React.memo ͳͲ͕࢖͑Δ
  15. ԿΛͯ͘͠ΕΔ͔ • جຊతʹ͢΂ͯ fbjs/shallowEqual ͯ͘͠ΕΔ • React.memo ͸ $$type Λॻ͖׵͑ͯ


    ಺෦ͷ updater ͷϩδοΫΛࠩ͠ସ͑ͯΔ
 㱺 SCU ʹ shallowEqual ͕ೖΔͱࢥͬͯྑ͍
  16. ·ͱΊ • recompose/pure ͸ class Ͱ΋ ؔ਺ Ͱ΋
 ࢖͑Δ •

    React.memo ͸ؔ਺༻ • PureComponent ͸ Ϋϥε༻ • React.memo ͸ ΦϓγϣϯͰνϡʔχϯάͰ͖Δ
  17. Options { pure = ture, areStatesEqual = (a, b) =>

    a === b, areOwnPropsEqual = shallowEqual, areStatePropsEqual = shallowEqual, areMergedPropsEqual = shallowEqual, storeKey = ‘store’, } HoC ࣗମͷ࠶ϨϯμϦϯάͷ੍ޚ͕Ͱ͖Δ
  18. connect() // version5 Component Store connect areStateEqual(prev, next) next =

    mapStateToProps(prev, next) prev = next // memoized once Update Childe Component // return true 
 in shouldComponentUpdate of HoC
  19. connect() // version5 Component Store connect areStateEqual(prev, next) next =

    mapStateToProps(prev, next) prev = next // memoized once 7FSTJPO͸)P$ϕʔε Update Childe Component // return true 
 in shouldComponentUpdate of HoC
  20. connect() // version5 connect areStateEqual(prev, next) next = mapStateToProps(prev, next)

    prev = next // memoized once PQUJPOQVSF  4IBMMPX&RVBM 4USJDU&RVBM Update Childe Component // return true 
 in shouldComponentUpdate of HoC Store Component
  21. connect() // version5 connect areStateEqual(prev, next) next = mapStateToProps(prev, next)

    prev = next // memoized once ୈ̐Ҿ਺ͰΦʔόϥΠυͰ͖Δ  QSFW4UBUF OFYU4UBUF CPPMFBO Update Childe Component // return true 
 in shouldComponentUpdate of HoC Store Component
  22. connect() // version5 connect areStateEqual(prev, next) next = mapStateToProps(prev, next)

    prev = next // memoized once Update Childe Component // return true 
 in shouldComponentUpdate of HoC Store Component લճͷ݁ՌΛอ͓࣋ͯ͘͠
  23. connect ·ͱΊ • HoCͰ࣮૷͞Ε͍ͯΔ • Connect ͷ areStateEqual ͕ false

    Λฦͤ͹
 ࢠίϯϙʔωϯτͷ࠶ϨϯμϦϯάͳ͠ • ୈ4Ҿ਺ͰΦϓγϣϯΛ஫ೖՄೳ