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

Vue Fes Japan 2018 サイトの速度改善 / High Performance Vue Fes Japan Site

Vue Fes Japan 2018 サイトの速度改善 / High Performance Vue Fes Japan Site

Vue.js Tokyo v-meetup #8 の発表資料
https://vuejs-meetup.connpass.com/event/95678/

INOUE Takuya

August 28, 2018
Tweet

More Decks by INOUE Takuya

Other Decks in Programming

Transcript

  1. 7VF'FTαΠτͷ଎౓վળ
    EFWUPͦͯ͠Ѩ෦׮ͷϗʔϜϖʔδΛ௒͑Ζʂ
    ͍ͷ͏͑ͨ͘΍ʢ͓͍ͪΌΜʣ!JOPVFUBLVZB
    7VFKT5PLZPWNFFVQ

    View Slide

  2. స৬υϥϑτʢCZϦϒηϯεʣ
    ͍ͷ͏͑ͨ͘΍͓͍ͪΌΜ!JOPVFUBLVZB
    /VYUKT 7VFY 7VFKTެࣜυΩϡϝϯτͷ຋༁ऀɺϝϯςφ
    ൴ঁ͔Β͸ɺ͓͍ͪΌΜͱݺ͹Ε͍ͯ·͢

    View Slide

  3. View Slide

  4. 7VF'FTαΠτͷಛ௃
    wIUUQTWVFGFTKQ
    wϔουը૾େখຕͷը૾
    w੩తαΠτʢ/VYU(FOFSBUFʣ
    w/FUMJGZ

    View Slide

  5. ࠓ೔࿩͢͜ͱ

    View Slide

  6. ࿩͢͜ͱ
    w଎౓໨ඪͷཱͯํʢॏཁʣ
    w଎౓վળʢͲͷΑ͏ʹߟ͑ͯԿΛ΍͔ͬͨʣ
    w଎౓Λҡ࣋͢Δ࢓૊Έͮ͘Γ

    View Slide

  7. ࿩͞ͳ͍͜ͱ
    w଎౓վળͷৄࡉʢ࣮૷ʣ

    View Slide

  8. ଎౓໨ඪͷཱͯํ

    View Slide

  9. Ϗδωεΰʔϧ͔Βߟ͑Δ

    View Slide

  10. 7VF'FTαΠτͷ໾ׂ
    w7VF'FTͱ͍͏ΠϕϯτΛ஌ͬͯ΋Β͏ʢप
    ஌ʣ
    w7VF'FTʹߦ͖͍ͨͱࢥͬͯ΋Β͏ʢڵຯͷ
    שىɺಈػ͚ͮʣ
    w7VF'FTΛָ͠ΊΔ৘ใΛఏڙ͢Δ

    View Slide

  11. 7VF'FTαΠτͷ଎౓վ
    ળ͕ͲͷΑ͏ʹܨ͕Δ͔ʁ

    View Slide

  12. 7VFKT੡ͷ7VF'FTαΠτ
    ͕ߴ଎ͰշదʹݟΒΕΔ

    View Slide

  13. 7VFKTͷϒϥϯσΟϯά

    View Slide

  14. 7VFKTͻ͍ͯ͸7VF'FT
    ʹڵຯΛ࣋ͬͯ΋Β͑Δ

    View Slide

  15. ੩తαΠτͷ଎౓վળͷࢦඪ

    View Slide

  16. ʮͲͷࢦඪʯ͕ʮͲͷ͘Β͍ʯ
    ଎͚Ε͹ྑ͍͔ʁ

    View Slide

  17. 'JSTU.FBOJOHGVM1BJOU
    w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODF
    VTFSDFOUSJDQFSGPSNBODFNFUSJDT
    8FCϖʔδ͕Ϣʔβʔʹͱͬͯҙຯͷ͋Δʢ໾ʹཱͭʣදࣔʹͳͬͨλΠϛϯά

    View Slide

  18. Ͳͷ͘Β͍଎͚Ε͹Α͍͔ʁ
    wϠίϒɾχʔϧηϯͷهࣄ
    wਓؒͷೝ஌ػೳͷ؍఺͔ΒʣҰ࿈ͷφϏήʔγϣϯ͕ؒ
    அͳ͘ਐΜͰ͍Δͱײ͡ΒΕΔݶքඵ
    w3"*-Ϟσϧ
    w3FTQPOTF "OJNBUJPO *EMF -PBEͷ໨ඪ஋
    w-PBEͷ໨ඪ஋ ϛϦඵ

    View Slide

  19. ք۾Ͱʮ͜ͷαΠτ͸଎͍ʯͱ͞Ε͍ͯ
    ΔαΠτΛ௒͑Δ΄͏͕7VFKTͷϒϥ
    ϯσΟϯάʹܨ͕ΔͷͰ͸ʁ

    View Slide

  20. Ͳͷ͘Β͍଎͚Ε͹Α͍͔ʁ
    wEFWUPͷ'JSTU.FBOJOHGVM1BJOUʢҎԼ
    '.1ʣΛ௒͑Δʂ
    wѨ෦׮ͷϗʔϜϖʔδͷ'.1Λ௒͑Δʂ

    View Slide

  21. ܭଌ߹੒ϞχλϦϯά
    wܭଌ༻ͷԾ૝؀ڥ
    wಉ͡৚݅Ͱ܁Γฦ͠ܭଌΛߦ͏
    w8FC1BHFUFTU

    View Slide

  22. EFWUP
    w'.1NT

    View Slide

  23. Ѩ෦׮ͷϗʔϜϖʔδ
    w'.1NT

    View Slide

  24. 7VF'FTαΠτʢ#FGPSFʣ
    w'.1NT

    View Slide

  25. ଎౓վળ

    View Slide

  26. ͍·ɺͲ͜ͷվળΛ΍ͬ
    ͍ͯΔʁΛৗʹҙࣝ

    View Slide

  27. ΫϦςΟΧϧϨϯμϦϯ
    άύεΛৗʹ೦಄ʹஔ͘

    View Slide

  28. IUUQTTRMB[VSFKQSCPPL
    ʢ௒଎ຊʹࡌ͍ͬͯΔਤʣ

    View Slide

  29. ຊ౰ʹޮՌ͕͋ͬͨͷ͔
    #FGPSF"GUFSΛ
    ͻͱͭͣͭܭଌ

    View Slide

  30. ҎԼɺಛʹޮՌ͕େ͖͔ͬ
    ͨ΋ͷΛ঺հ͍ͯ͘͠

    View Slide

  31. ը૾ͷ࠷దԽฤ

    View Slide

  32. ը૾ܗࣜͷબ୒

    View Slide

  33. ը૾ܗࣜͷಛ௃ൺֱ
    w IUUQTXXXIUNMSPDLTDPNFOUVUPSJBMTTQFFEJNH
    DPNQSFTTJPO

    View Slide

  34. ը૾ܗࣜͷબ୒

    View Slide

  35. ը૾ͷϦαΠζ

    View Slide

  36. ը૾ͷϦαΠζ
    wෆඞཁʹେ͖ͳը૾Λϩʔυ͠ͳ͍Α͏ʹ͢
    Δ
    wQQJʢQJYFMQFSJODIʣʹ߹Θͤͯ࠷దͳαΠ
    ζͷը૾Λϩʔυ͢Δ
    wTSDTFUଐੑ

    View Slide

  37. TSDTFUଐੑ

    View Slide

  38. ը૾ͷѹॖ

    View Slide

  39. ը૾ͷѹॖϥΠϒϥϦ
    wNP[KQFHKQFHUBOKQFHPQUJN
    wQOHRVBOU
    wPQUJQOH
    wHJGTJDMF
    wTWHP

    View Slide

  40. (6*πʔϧ
    w*NBHF0QUJN
    w಺෦Ͱ+1&(0QUJN΍0QUJ1/(ͳͲΛ࢖͏
    w+1&(NJOJͱൺֱͯ͠ߴ͍ѹॖ཰ɻॲཧ଎౓
    ͸஗͍
    w*NBHF"MQIB

    View Slide

  41. ίϚϯυϥΠϯπʔϧ
    wJNBHFNJO
    wJNBHFNJONP[KQFH
    wJNBHFNJOKQFHPQUJN
    wͳͲϓϥάΠϯͱ߹Θͤͯ࢖͏

    View Slide

  42. JNBHFNJO
    wOQNJOTUBMMJNBHFNJODMJ
    wOQNJOTUBMMJNBHFNJOQOHRVBOU
    wJNBHFNJOŠQMVHJOQOHRVBOUŠPVU
    EJSCBSGPP

    View Slide

  43. ը૾ͷ஗Ԇಡࠐ

    View Slide

  44. ը૾ͷ஗Ԇಡࠐ
    wWVFMB[ZMPBE
    wϑΝʔετϏϡʔʹೖΒͳ͍ը૾͸஗Ԇಡࠐ
    wϓϨʔεϗϧμը૾ΛͰ͖Δ͚ͩදࣔͤͨ͞
    ͘ͳ͔ͬͨͷͰɺ7JFXQPSUΑΓ΋QY
    Լʹདྷͨ࣌఺ͰಡࠐΛ։࢝

    View Slide

  45. ը૾ͷ஗Ԇಡࠐ
    wʮը૾͕7JFXQPSUΑΓ΋QYԼʹདྷ
    ͨʯ൑ఆ͸*OUFSTFDUJPO0CTFSWFSͰ
    w·ͩ*&ͱ4BGBSJ͕ରԠ͍ͯ͠ͳ͍ͷͰ
    1PMZpMM͕ඞཁ

    View Slide

  46. 8FCϑΥϯτฤ

    View Slide

  47. "EPCF5ZQFLJU
    w$44͔ΒಡΈࠐΉͱʙNT΄ͲϨ
    ϯμϦϯάΛϒϩοΫͯ͠͠·͏
    w+4Ͱ஗Ԇಡࠐͤ͞ΔΑ͏ʹͨ͠

    View Slide

  48. 1SFMPBE

    View Slide

  49. )551 $%/

    View Slide

  50. View Slide

  51. ଎౓վળͷ݁Ռ

    View Slide

  52. 7VF'FTαΠτʢ"GUFSʣ
    w'.1NTNT
    w
    EFWUPNT
    Ѩ෦׮ͷϗʔϜϖʔδNTʢ͜ΕͲ͏΍ͬͨΒউͯΔΜͩʜ

    View Slide

  53. ଎౓Λҡ࣋͢Δ
    ࢓૊Έͮ͘Γ

    View Slide

  54. ը૾ѹॖͷࣗಈԽ

    View Slide

  55. (JU)PPLT
    wίϛοτ͢ΔલʹࣗಈͰը૾ѹॖ
    wIVTLZΛ࢖͑͹όʔδϣϯ؅ཧͰ͖Δ

    View Slide

  56. IVTLZઃఆྫ

    View Slide

  57. View Slide

  58. ϞχλϦϯάͷڧԽ

    View Slide

  59. ϞχλϦϯάͷڧԽ
    w8FC1BHFUFTUΛϗεςΟϯάͯ͠ɺఆظత
    ʹ࣮ߦ͢ΔͳͲ
    wʢ·ͩ΍͍ͬͯͳ͍͕ɺ΍ͬͯΈ͍ͨʣ

    View Slide

  60. ·ͱΊ
    w଎౓վળͷ໨ඪ͸ɺϏδωεΰʔϧ͔Βߟཱ͑ͯͯ
    Δ
    wΫϦςΟΧϧϨϯμϦϯάύεΛ೦಄ʹஔ͍ͯɺ͍
    ·ɺͲ͜ͷվળΛ΍͍ͬͯΔͷ͔Λৗʹҙࣝ͢Δ
    wվળΛҰ౓΍ͬͯऴΘΓͰ͸ͳ͘ɺվળͨ͠଎౓
    Λҡ࣋͢Δ࢓૊Έ΋ॏཁ

    View Slide

  61. View Slide

  62. View Slide