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

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

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