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
   
   7VFKT
   5PLZP
   WNFFVQ
   
2. స৬υϥϑτʢCZ
   Ϧϒηϯεʣ ͍ͷ͏͑ͨ͘΍
   
   ͓͍ͪΌΜ
   !JOPVFUBLVZB /VYUKT
   7VFY
   7VFKT
   ެࣜυΩϡϝϯτͷ຋༁ऀɺϝϯςφ ൴ঁ͔Β͸ɺ͓͍ͪΌΜͱݺ͹Ε͍ͯ·͢
4. 7VF
   'FT
   αΠτͷಛ௃ wIUUQTWVFGFTKQ
   wϔουը૾
   
   େখຕͷը૾
   w੩తαΠτʢ/VYU
   (FOFSBUFʣ
   w/FUMJGZ
5. ࠓ೔࿩͢͜ͱ
6. ࿩͢͜ͱ w଎౓໨ඪͷཱͯํʢॏཁʣ
   w଎౓վળʢͲͷΑ͏ʹߟ͑ͯԿΛ΍͔ͬͨʣ
   w଎౓Λҡ࣋͢Δ࢓૊Έͮ͘Γ
7. ࿩͞ͳ͍͜ͱ w଎౓վળͷৄࡉʢ࣮૷ʣ
8. ଎౓໨ඪͷཱͯํ
9. Ϗδωεΰʔϧ͔Βߟ͑Δ
10. 7VF
    'FT
    αΠτͷ໾ׂ w7VF
    'FT
    ͱ͍͏ΠϕϯτΛ஌ͬͯ΋Β͏ʢप ஌ʣ
    w7VF
    'FT
    ʹߦ͖͍ͨͱࢥͬͯ΋Β͏ʢڵຯͷ שىɺಈػ͚ͮʣ
    w7VF
    'FT
    Λָ͠ΊΔ৘ใΛఏڙ͢Δ
11. 7VF
    'FT
    αΠτͷ଎౓վ ળ͕ͲͷΑ͏ʹܨ͕Δ͔ʁ
12. 7VFKT
    ੡ͷ
    7VF
    'FT
    αΠτ ͕ߴ଎ͰշదʹݟΒΕΔ
    
13. 
    7VFKT
    ͷϒϥϯσΟϯά
14. 
    7VFKT
    ͻ͍ͯ͸
    7VF
    'FT
    ʹڵຯΛ࣋ͬͯ΋Β͑Δ
15. ੩తαΠτͷ଎౓վળͷࢦඪ
16. ʮͲͷࢦඪʯ͕ʮͲͷ͘Β͍ʯ ଎͚Ε͹ྑ͍͔ʁ
17. 'JSTU
    .FBOJOHGVM
    1BJOU w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODF VTFSDFOUSJDQFSGPSNBODFNFUSJDT 8FC
    ϖʔδ͕Ϣʔβʔʹͱͬͯҙຯͷ͋Δʢ໾ʹཱͭʣදࣔʹͳͬͨλΠϛϯά
18. Ͳͷ͘Β͍଎͚Ε͹Α͍͔ʁ wϠίϒɾχʔϧηϯͷهࣄ
    wਓؒͷೝ஌ػೳͷ؍఺͔ΒʣҰ࿈ͷφϏήʔγϣϯ͕ؒ அͳ͘ਐΜͰ͍Δͱײ͡ΒΕΔݶք
    ඵ
    w3"*-
    Ϟσϧ
    w3FTQPOTF
    "OJNBUJPO
    *EMF
    -PBE
    ͷ໨ඪ஋
    w-PBE
    ͷ໨ඪ஋
     
    ϛϦඵ
19. ք۾Ͱʮ͜ͷαΠτ͸଎͍ʯͱ͞Ε͍ͯ ΔαΠτΛ௒͑Δ΄͏͕
    7VFKT
    ͷϒϥ ϯσΟϯάʹܨ͕ΔͷͰ͸ʁ
20. Ͳͷ͘Β͍଎͚Ε͹Α͍͔ʁ wEFWUP
    ͷ
    'JSTU
    .FBOJOHGVM
    1BJOUʢҎԼ
    '.1ʣΛ௒͑Δʂ
    wѨ෦׮ͷϗʔϜϖʔδͷ
    '.1
    Λ௒͑Δʂ
21. ܭଌ
    
    ߹੒ϞχλϦϯά wܭଌ༻ͷԾ૝؀ڥ
    wಉ͡৚݅Ͱ܁Γฦ͠ܭଌΛߦ͏
    w8FC1BHFUFTU
22. EFWUP w'.1
    NT
23. Ѩ෦׮ͷϗʔϜϖʔδ w'.1
    NT
24. 7VF
    'FT
    αΠτʢ#FGPSFʣ w'.1
    NT
25. ଎౓վળ
26. ͍·ɺͲ͜ͷվળΛ΍ͬ ͍ͯΔʁΛৗʹҙࣝ
27. ΫϦςΟΧϧϨϯμϦϯ άύεΛৗʹ೦಄ʹஔ͘
28. IUUQTTRMB[VSFKQSCPPL ʢ௒଎ຊʹࡌ͍ͬͯΔਤʣ
29. ຊ౰ʹޮՌ͕͋ͬͨͷ͔
    #FGPSF
    
    "GUFS
    Λ
    ͻͱͭͣͭܭଌ
30. ҎԼɺಛʹޮՌ͕େ͖͔ͬ ͨ΋ͷΛ঺հ͍ͯ͘͠
31. ը૾ͷ࠷దԽฤ
32. ը૾ܗࣜͷબ୒
33. ը૾ܗࣜͷಛ௃ൺֱ w IUUQTXXXIUNMSPDLTDPNFOUVUPSJBMTTQFFEJNH DPNQSFTTJPO
34. ը૾ܗࣜͷબ୒
35. ը૾ͷϦαΠζ
36. ը૾ͷϦαΠζ wෆඞཁʹେ͖ͳը૾Λϩʔυ͠ͳ͍Α͏ʹ͢ Δ
    wQQJʢQJYFM
    QFS
    JODIʣʹ߹Θͤͯ࠷దͳαΠ ζͷը૾Λϩʔυ͢Δ
    wTSDTFU
    ଐੑ
37. TSDTFU
    ଐੑ
38. ը૾ͷѹॖ
39. ը૾ͷѹॖϥΠϒϥϦ wNP[KQFH
    
    KQFHUBO
    
    KQFHPQUJN
    wQOHRVBOU
    wPQUJQOH
    wHJGTJDMF
    wTWHP
40. (6*
    πʔϧ w*NBHF0QUJN
    w಺෦Ͱ
    +1&(0QUJN
    ΍
    0QUJ1/(
    ͳͲΛ࢖͏
    w+1&(NJOJ
    ͱൺֱͯ͠ߴ͍ѹॖ཰ɻॲཧ଎౓ ͸஗͍
    w*NBHF"MQIB
41. ίϚϯυϥΠϯπʔϧ wJNBHFNJO
    wJNBHFNJONP[KQFH
    wJNBHFNJOKQFHPQUJN
    wͳͲϓϥάΠϯͱ߹Θͤͯ࢖͏
42. JNBHFNJO w
    OQN
    JOTUBMM
    JNBHFNJODMJ
    w
    OQN
    JOTUBMM
    JNBHFNJOQOHRVBOU
    w
    JNBHFNJO
    ŠQMVHJOQOHRVBOU
    ŠPVU EJSCBS
    GPP
43. ը૾ͷ஗Ԇಡࠐ
44. ը૾ͷ஗Ԇಡࠐ wWVFMB[ZMPBE
    wϑΝʔετϏϡʔʹೖΒͳ͍ը૾͸஗Ԇಡࠐ
    wϓϨʔεϗϧμը૾ΛͰ͖Δ͚ͩදࣔͤͨ͞ ͘ͳ͔ͬͨͷͰɺ7JFXQPSU
    ΑΓ΋
    QY
    Լʹདྷͨ࣌఺ͰಡࠐΛ։࢝
45. ը૾ͷ஗Ԇಡࠐ wʮը૾͕
    7JFXQPSU
    ΑΓ΋
    QY
    Լʹདྷ ͨʯ൑ఆ͸
    *OUFSTFDUJPO0CTFSWFS
    Ͱ
    w·ͩ
    *&
    ͱ
    4BGBSJ
    ͕ରԠ͍ͯ͠ͳ͍ͷͰ
    1PMZpMM
    ͕ඞཁ
46. 8FC
    ϑΥϯτฤ
47. "EPCF
    5ZQFLJU w$44
    ͔ΒಡΈࠐΉͱ
    
    ʙ
    
    NT
    ΄ͲϨ ϯμϦϯάΛϒϩοΫͯ͠͠·͏
    w
    +4
    Ͱ஗Ԇಡࠐͤ͞ΔΑ͏ʹͨ͠
48. 1SFMPBE
49. )551
    $%/
51. ଎౓վળͷ݁Ռ
52. 7VF
    'FT
    αΠτʢ"GUFSʣ w'.1
    NT
    
    NT
    
    
    
    w EFWUP
    NT
    Ѩ෦׮ͷϗʔϜϖʔδ
    NTʢ͜ΕͲ͏΍ͬͨΒউͯΔΜͩʜ
53. ଎౓Λҡ࣋͢Δ
    ࢓૊Έͮ͘Γ
54. ը૾ѹॖͷࣗಈԽ
55. (JU
    )PPLT wίϛοτ͢ΔલʹࣗಈͰը૾ѹॖ
    wIVTLZ
    Λ࢖͑͹όʔδϣϯ؅ཧͰ͖Δ
56. IVTLZ
    ઃఆྫ
58. ϞχλϦϯάͷڧԽ
59. ϞχλϦϯάͷڧԽ w8FC1BHFUFTU
    ΛϗεςΟϯάͯ͠ɺఆظత ʹ࣮ߦ͢ΔͳͲ
    wʢ·ͩ΍͍ͬͯͳ͍͕ɺ΍ͬͯΈ͍ͨʣ
60. ·ͱΊ w଎౓վળͷ໨ඪ͸ɺϏδωεΰʔϧ͔Βߟཱ͑ͯͯ Δ
    wΫϦςΟΧϧϨϯμϦϯάύεΛ೦಄ʹஔ͍ͯɺ͍ ·ɺͲ͜ͷվળΛ΍͍ͬͯΔͷ͔Λৗʹҙࣝ͢Δ
    wվળΛҰ౓΍ͬͯऴΘΓͰ͸ͳ͘ɺվળͨ͠଎౓ Λҡ࣋͢Δ࢓૊Έ΋ॏཁ