Vue 2で大きなデータを扱うときの性能改善手法

Node学園 37時限目 https://nodejs.connpass.com/event/221358/

Transcript

1. 
   /PEFֶԂ
   ࣌ݶ໨ ετοΫϚʔΫגࣜձࣾ
   ங୩
   ڤ೭ 7VF
   Ͱେ͖ͳσʔλΛ
   ѻ͏ͱ͖ͷੑೳվળख๏ 1
2. © 2021 Stockmark Inc. ࣗݾ঺հ w ங୩
   ڤ೭
   5BLBZVLJ
   5TVLJUBOJ
   w ετοΫϚʔΫגࣜձࣾͰɺ"TUSBUFHZͱ͍͏΢ΣϒαʔϏεΛ։ൃ͓ͯ͠Γɺ ओʹϑϩϯτΤϯυΛ୲౰
   w ޷͖ͳΤσΟλ͸7JN
   w 4/4
   w 5XJUUFS
   !UTVLLFF
   w (JU)VC
   UTVLLFF 2
3. © 2021 Stockmark Inc. ͪΐͬͱ͚ͩετοΫϚʔΫͱ"TUSBUFHZͷ঺հ w ετοΫϚʔΫגࣜձࣾ
   w ࣗવݴޠॲཧΛ׆༻ͨ͠#UP#ͷ΢ΣϒαʔϏεΛఏڙ͍ͯ͠ ΔελʔτΞοϓ
   w "OFXT"TUSBUFHZ"TBMFTͱ͍ͬͨෳ਺ͷϓϩμΫτΛఏڙ
   w ౦༸ܦࡁ
   ͍͢͝ϕϯνϟʔ
   ೥࠷৽൛
   w "TUSBUFHZ
   w ΢Σϒχϡʔε͔ΒࣗવݴޠॲཧͰࢢ৔τϨϯυ΍اۀಈ޲ Λநग़͠ɺߏ଄ԽɾՄࢹԽ͢Δ͜ͱͰϏδωεͷҙࢥܾఆΛ αϙʔτ
   w ٕज़తͳશମߏ੒ʹ͍ͭͯ͸ฐࣾςοΫϒϩάͷهࣄΛ͝ཡ ͍ͩ͘͞ "TUSBUFHZ 3
4. © 2021 Stockmark Inc. ϑϩϯτΤϯυͰେ͖ͳσʔλΛѻ͏ w "TUSBUFHZͰ͸ɺΠϯλϥΫςΟϒͳૢ࡞΋͋Δ ͷͰɺେ͖ͳσʔλΛҰׅͰऔಘ͠ϑϩϯτΤϯ υͰదٓม׵ͯ͠ՄࢹԽ
   w ͜͜ͷઃܭͷੋඇ͸Ұ୴ஔ͍͓ͯ͘
   w ৔߹ʹΑͬͯ͸ฏؾͰ.#લޙͷ+40/͕όο ΫΤϯυ͔ΒඈΜͰ͘Δ͜ͱ͕͋ΓɺͦΕΛߴ଎ ʹऔΓѻ͏ඞཁ͕͋Δ 4
5. © 2021 Stockmark Inc. "TUSBUFHZͰऔΓ૊Μͩੑೳվળ w "TUSBUFHZͰ͸ϑϩϯτΤϯυʹ7VF
   Λ࠾༻͍ͯ͠Δ
   w 7VF
   ΁͸Ҡߦ४උதʜ
   w Ұޱʹੑೳͱݴͬͯ΋৭ʑ͋Δ͕ɺେ͖͍σʔλΛऔΓ ճͯ͠ΠϯλϥΫςΟϒͳίϯςϯπΛ࡞Δͱ͍͏͜ͱ Ͱɺࠓճ͸͍ΘΏΔϥΠϯλΠϜੑೳͷ࿩
   w ʮਪଌ͢ΔͳɺܭଌͤΑʯͷమଇʹैͬͯɺ$ISPNF
   %FW5PPMTͰϓϩϑΝΠϦϯάͯ͠ϘτϧωοΫΛݟͭ ͚Δˠվળ͢Δͷ܁Γฦ͠
   w %FW5PPMTͷ࢖͍ํࣗମ͸ެࣜυΩϡϝϯτͳͲΛ ࢀর͍͚ͨͩΕ͹ Ҏ߱ͷܭଌ͸ɺҎԼͷ؀ڥͰ࣮ࢪ
   w .BD#PPL
   1SP
   Πϯν
   
   w 
   ()[
   ίΞ
   *OUFM
   $PSF
   J
   w ϝϞϦ
   (#
   w NBD04
   
   w 7VF
    5
6. © 2021 Stockmark Inc. αϯϓϧΞϓϦ w "TUSBUFHZશମͩͱ༁͕෼͔Βͳ͍ͷͰɺੑೳվળͷޮՌ͕ ෼͔Γ΍ͦ͢͏ͳখ͞ͳαϯϓϧΛ࡞ͬͨ
   w IUUQTHJUIVCDPNUTVLLFFWVFIBOEMFCJHEBUB
   
   w σʔλϩʔυΛԡ͢ͱɺ݅ͷσʔλ͕Ϧετͱͯ͠ දࣔ͞ΕɺνΣοΫϘοΫεΛԡ͢ͱରԠ͢ΔՕॴ͕ϋΠϥ Πτ͞ΕͨΓ͢Δ
   w ಺༰ʹ͋·Γҙຯ͸͋Γ·ͤΜʜ
   w νΣοΫϘοΫεΛԡ͢ͱϦετͷҰ෦͕ϋΠϥΠτ͞Ε Δɺ͚ͩͳͷʹ͘͢͝஗͍ʜ 6
7. © 2021 Stockmark Inc. ଌΔʂ w νΣοΫϘοΫεΛԡ͔ͯ͠Βը໘ʹ൓ө͞ΕΔ·ͰΛϓϩϑΝΠϥͰܭଌͯ͠ΈΔ %0.ͷߋ৽ʹ͕͔͔͍࣌ؒͬͯΔ 7
8. © 2021 Stockmark Inc. 7JSUVBM
   4DSPMMΛಋೖ͢Δ w ը໘ʹදࣔ͞Ε͍ͯΔཁૉ͚ͩΛඳը͢ΔΑ͏ʹ͢Δ࢓૊Έ
   w ͞Βʹ%0.Λ࢖͍ճ͢͜ͱͰɺ%0.ͷੜ੒ɾഁغͷίετ΋࡟ݮ͍ͯ͠Δ
   w 7VF޲͚ʹ͍͔ͭ͘ϥΠϒϥϦ͕͋ΔͷͰద౰ʹબఆ͢Δͱྑ͍
   w IUUQTHJUIVCDPN"LSZVNWVFWJSUVBMTDSPMMFS
   w ˢαϯϓϧͰ͸ͪ͜ΒΛར༻
   w IUUQTHJUIVCDPNUBOHCDWVFWJSUVBMTDSPMMMJTU
   w "TUSBUFHZͰ͸ɺҰ෦ͷը໘͕ෳࡶʹͳ͍ͬͯΔՕॴ͸طଘϥΠϒϥϦ͕࢖͑ͳ͔ͬͨͷͰɺ *OUFSTFDUJPO0CTFSWFSΛ࢖ͬͯࣅͨΑ͏ͳ࢓૊ΈΛࣗ࡞͍ͯ͠Δ 8
9. © 2021 Stockmark Inc. 7JSUVBM
   4DSPMMಋೖ࣌ͷ஫ҙ w 7JSUVBM
   4DSPMMΛಋೖ͢Δͱɺ౰વը໘֎ͷςΩετ͕ϒϥ ΢βͷςΩετݕࡧʹͻ͔͔ͬΒͳ͘ͳΔͷͰɺผ్ϑΟ ϧλΛ࣮૷͢ΔͳͲͷิॿ͕ඞཁʹͳΔ͔΋
   w 7JSUVBM
   4DSPMMࣗମͷॳظԽ࣌ؒ΋਺͕ଟ͘ͳͬͯ͘Δͱແ ࢹͰ͖ͳ͍
   w "TUSBUFHZͩͱɺը໘্ʹʙͷ7JSUVBM
   4DSPMMϦ ετ͕ஔ͔ΕΔ͜ͱ͕͋Γ໰୊ʹͳͬͨ
   ˠ
   ॳظঢ়ଶͰ͸Ϧετͷ্Ґ͙݅Β͍͚ͩΛී௨ ʹදࣔ͠ɺNPVTFPWFSͰ7JSUVBM
   4DSPMMʹஔ͖׵͑Δ ͳͲɺॳظԽΛ஗Ԇͤ͞Δͱྑ͍ ੺࿮ͷՕॴ͕શ෦7JSUVBM
   4DSPMMϦετͰɺ
   ͦΕͧΕ਺ͷاۀ໊͕ฒΜͰ͍Δ 9
10. © 2021 Stockmark Inc. ͞ΒʹଌΔʂ w %0.ͷͱ͜Ζ͸΄ͱΜͲফ͕͑ͨDPNQVUFE(FUUFS NT͙Β͍ ʹվળͷ༨஍͕͋Δ BEE%FQΈ͍ͨͳͷ͕ΊͪΌͪ͘ΌεύΠΫ͍ͯ͠Δʁ 10
11. © 2021 Stockmark Inc. 7VFͷ3FBDUJWJUZʹ͍ͭͯ w 7VF
    Ͱ͸ɺίϯϙʔωϯτʹσʔλ͕౉͞ΕΔͱɺࣗಈతʹͦͷ σʔλΛ࠶ؼతʹḷͬͯ͢΂ͯͷϓϩύςΟΛHFUUFSTFUUFSͰϥοϓ ͯͦ͠ͷதͰมߋݕ஌͍ͯ͠Δ
    w ৄࡉ͸ެࣜυΩϡϝϯτʹͯ
    w ͳͷͰɺେ͖ͳσʔλΛ౉͢ͱɺͦͷ௕େͳߏ଄Λશ෦࠶ؼతʹม׵ ͠ɺ͔ͭɺมߋݕ஌ͷͱ͖ʹͦΕΒશͯʹ͍ͭͯґଘؔ܎Λܭࢉ͢Δ ͖ͬ͞ͷBEE%FQ͕ͦͷҰ෦ ʜΈ͍ͨͳ͜ͱ͕ى͜Δ
    w গͳ͍σʔλྔͰ͕͜͜໰୊ʹͳΔ͜ͱ͸΄΅ͳ͍͕ɺେ͖͍ σʔλͩͱ໰୊ʹͳΔ
    w 7VF
    Ͱ͸3FBDUJWJUZͷ࣮૷͕1SPYZϕʔεʹมΘ͍ͬͯΔͷͰɺ Ϛγʹͳ͍ͬͯΔ͔΋ʁ ཁݕূ 7VF
    ͷEBUBΛDPOTPMFMPH ͨ͜͠ͱ͕͋ Ε͹ɺΦϒδΣΫτʹ@@PC@@ͱ͔ SFBUJWF(FUUFSͱ͔͕෇͍͍ͯͯɺͳΜ͡Ό ͜ΓΌʁͱࢥͬͨํ΋͍Δ͔΋ 11
12. © 2021 Stockmark Inc. 7VFͷ3FBDUJWJUZΛ཈੍͢Δ w Α͘ߟ͑ΔͱɺόοΫΤϯυ͔ΒಘΒΕͨσʔλͷத਎ͷҰ෦͕ޙ͔ΒมΘΔ͜ͱ͸ͳ͍ͷͰɺ࠶ؼతʹมߋݕ ஌͢Δඞཁ͸ͳ͍
    w ͕ɺ7VF
     ͷ0QUJPO
    "1* ͩͱͦ͜Λ੍ޚ͢Δज़͕ͳ͍ʜʁ
    w ࣮͸ɺJT'SP[FOͳΦϒδΣΫτ͸3FBDUJWF΁ม׵͞Εͳ͍ʂ
    w ֘౰Օॴ
    IUUQTHJUIVCDPNWVFKTWVFCMPCGGEGDCFCF TSDDPSFPCTFSWFSUSBWFSTFKT--
    w ࢀߟهࣄ
    IUUQTSFTJEFJDHJUIVCJPCMPHIBOEMJOHMPOHBSSBZTQFSGPSNBOUMZJOWVFKT
    w ͭ·ΓɺόοΫΤϯυ͔ΒಘΒΕͨσʔλ͸0CKFDUGSFF[F ͓ͯ͘͠ͱྑ͍ const data = await fetch(...); // όοΫΤϯυ͔ΒσʔλΛऔಘͯ͠… this.data = Object.freeze(data); // freezeͯ͠Vueͷίϯϙʔωϯτʹ౉͚ͩ͢ 12
13. © 2021 Stockmark Inc. ͞Βʹ͞ΒʹଌΔʂ w DPNQVUFE(FUUFSͷॲཧ͕໿NTˠNTʹݮগʂ
    w "TUSBUFHZ͸͞Βʹෳࡶͳߏ଄ʹରͯ͠΋ͬͱ΍΍͍͜͠ܭࢉΛ͍ͯͨ͠ͷͰɺ΋ͷ͍͢͝ޮՌ͕͋ͬͨ 13
14. © 2021 Stockmark Inc. $PNQPTJUJPO
    "1* w 7VFͰ͸ɺίϯϙʔωϯτͷ࡞Γํͱͯ͠ɺچདྷ͔Βͷ0QUJPO
    "1*ͱɺ7VF
    ͔Βಋೖ͞Ε 7VF
    ʹ΋όοΫϙʔ τ͞Ε͍ͯΔ $PNQPTJUJPO
    "1*ͷେ͖͘छྨ͕͋Δ
    w ͜͜·Ͱ͸0QUJPO
    "1*Ͱͷ࿩ͩͬͨ
    w $PNQPTJUJPO
    "1*Ͱ͸ɺ3FBDUJWF΁ͷม׵͸ࣗಈతʹͰ͸ͳ͘໌ࣔతʹߦ͏ඞཁ͕͋ΓɺͦͷͨΊͷ"1*ͷதʹ TIBMMPX3FBDUJWFTIBMMPX3FGͱ͍͏࠶ؼతʹ3FBDUJWFʹม׵͠ͳ͍΋ͷ΋͋Δ
    w ެࣜυΩϡϝϯτͰ΋4LJQQJOH
    QSPYZ
    DPOWFSTJPO
    DBO
    QSPWJEF
    QFSGPSNBODF
    JNQSPWFNFOUT
    XIFO
    SFOEFSJOH
    MBSHF
    MJTUT
    XJUI
    JNNVUBCMF
    EBUB
    TPVSDFTΈ͍ͨͳهड़͕͋Δ
    
    w ͢ͳΘͪɺ0QUJPO
    "1*Ͱ0CKFDUGSFF[F ͨ͠ͱ͖ͱಉ౳ͷޮՌ͕ಘΒΕΔ // const data = ref([]); //Α͋͘Δఆٛํ๏ const data = shallowRef([]); // shallowRefͰσʔλΛఆٛ data.value = await fetch(...); // ͜͜Ͱ࠶ؼతʹreactiveʹ͸ͳΒͳ͍ 14
15. © 2021 Stockmark Inc. ͓·͚
    7VFͰΑ͘΍Δ࠷దԽ w ͜͜·Ͱ঺հͨ͠಺༰Ҏ֎ʹ΋ɺ"TUSBUFHZͰ͸7VFͰΑ͘΍Δ࠷దԽ΋ద࣮ٓࢪ͍ͯ͠Δ
    w ద੾ͳཻ౓ͰͷίϯϙʔωϯτԽ
    w DPNQVUFEͷద੾ͳར༻
    w ͳͲͳͲ
    w ։ൃʹ͋ͨͬͯࢀߟʹͤͯ͞௖͍ͨهࣄ
    w IUUQTRJJUBDPNNJZBPLBJUFNTDFBFF
    w IUUQTRJJUBDPNTIVOJUFNTCFBFDCBG
    w IUUQTUFDIBOEQBEDPKQFOUSZ
    w ͳͲͳͲ
    15
16. © 2021 Stockmark Inc. ͓·͚
    +BWB4DSJQUϨϕϧͰͷ࠷దԽ w େ͖ͳσʔλΛऔΓճ্͢Ͱɺ+BWB4DSJQUϨϕϧͰͷ࠷దԽ͕ඞཁͳ͜ͱ΋
    w ྫ͑͹ʜ
    w ഑ྻͷ݁߹͸ɺBSSBZDPODBU BSSBZ ΑΓBSSBZQVTI BSSBZ ͷํ͕ૣ͍
    w ࢀߟهࣄ
    IUUQTEFWUPVJMJDJPVTKBWBTDSJQUBSSBZQVTIJTYGBTUFSUIBOBSSBZDPODBUPLJ
    w ޙऀ͸ഁյతมߋͳͷͰݫີʹ͸ಉ͡ڍಈͰ͸ͳ͍ͷ͸஫ҙ
    w େ͖͍σʔλશମͷ഑ྻʹͳ͍ͬͯΔϓϩύςΟΛूΊͯ͘ΔɺΈ͍ͨͳूܭॲཧΛॻ͘ͱ͖ʹ͸ؾʹֻ ͚͓ͯ͘ͱྑ͍
    w "TUSBUFHZͰ΋͜Ε͕ΊͬͪΌޮ͘৔໘͕͋Γ·ͨ͠
    w ഑ྻͷϢχʔΫॲཧ͸"SSBZGSPN OFX
    4FU BSSBZ Λ࢖͏ͱ؆୯
    
    ૣ͍
    w ࢀߟهࣄ
    IUUQTRJJUBDPNQJSPPSJUFNTDGGCGB
    
    16
17. © 2021 Stockmark Inc. ·ͱΊ w 7VFͰେ͖ͳσʔλΛѻ͏ͱ͖ͷੑೳվળͰؾΛ෇͚Δ͜ͱ
    w ·ͣ͸ͱʹ͔͘$ISPNF
    %FW5PPMTͳͲͰܭଌ͢Δ
    w ෆཁͳ%0.ͷߋ৽͕ͳ͍͔Λ֬ೝͯ͠ରॲ͢Δ
    w 7VFͷ3FBDUJWJUZͷ࢓૊ΈΛཧղ੍͠ޚ͢Δ
    w ͪ͜Β͸7VF
    
    
    $PNQPTJUJPO
    "1*Ͱ͍ͩͿྑ͘ͳΔͷͰɺૣ͘Ҡߦ͍ͨ͠ʂ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ 17