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

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

Avatar for INOUE Takuya INOUE Takuya
August 28, 2018
Programming
9
7.7k

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

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

Avatar for INOUE Takuya

INOUE Takuya

August 28, 2018
Tweet

More Decks by INOUE Takuya

See All by INOUE Takuya
create-nuxt-app で選べる現代の UI フレームワーク / Modern UI Frameworks
Avatar for INOUE Takuya inouetakuya
7
2.7k
カンファレンス主催 Casual Talks #1 オープニング / Conference Casual Talks 1 Opening
Avatar for INOUE Takuya inouetakuya
0
820
カンファレンス主催 Casual Talks #1 パネルディスカッション / Conference Casual Talks 1 Panel Discussion
Avatar for INOUE Takuya inouetakuya
0
750
ウェブサイトの速度改善 / High Performance Website
Avatar for INOUE Takuya inouetakuya
0
480
Vue Fes Japan 2018 ティザーサイトの裏側 / Inside Vue Fes Japan 2018
Avatar for INOUE Takuya inouetakuya
4
2.9k
Nuxt.js でつくるアプリケーションの設計 / Architecture of nuxt application
Avatar for INOUE Takuya inouetakuya
8
5.2k
Vue Fes Japan 2018 ティザーサイトの技術選定 / Vue Fes Japan 2018 site architecture
Avatar for INOUE Takuya inouetakuya
1
360
いま Vue.js に現場の事例が求められている / stage of vuejs jp
Avatar for INOUE Takuya inouetakuya
0
3.2k
お仕事で Nuxt.js を使うか検討した話 / decision about whether to use nuxtjs
Avatar for INOUE Takuya inouetakuya
8
18k

Other Decks in Programming

See All in Programming
社会人になっても趣味開発を続けたい！ / traPavilion
Avatar for mazrean mazrean
1
100
Introduce Hono CLI
Avatar for Yusuke Wada yusukebe
6
3.1k
釣り地図SNSにおける有料機能の実装
Avatar for nokonoko1203 nokonoko1203
0
200
Devoxx BE - Local Development in the AI Era
Avatar for Kevin Dubois kdubois
0
140
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
Avatar for 小島舞子 / Maiko Kojima maikokojima
0
650
Cursorハンズオン実践！
Avatar for Ikko Eltociear Ashimine eltociear
2
1.2k
Amazon Verified Permissions実践入門 〜Cedar活用とAppSync導入事例/Practical Introduction to Amazon Verified Permissions
Avatar for MURAKAMI Masahiko fossamagna
2
100
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
Avatar for RIZAPテクノロジーズ rizap_tech
0
7.7k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
Avatar for N Akita nakita628
0
320
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
180
Vueのバリデーション、結局どれを選べばいい？ ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
Avatar for ねぎなす neginasu
2
1.6k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
280

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
7k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
130k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.7k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
640
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
23k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
10
890
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.2k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
930
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3k

Transcript

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

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

  3. None

  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.FBOJOHGVM1BJOU w IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODF VTFSDFOUSJDQFSGPSNBODFNFUSJDT 8FCϖʔδ͕Ϣʔβʔʹͱͬͯҙຯͷ͋Δʢ໾ʹཱͭʣදࣔʹͳͬͨλΠϛϯά

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

    ϛϦඵ

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

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

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

  22. EFWUP w'.1NT

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

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

  25. ଎౓վળ

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

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

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

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

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

  31. ը૾ͷ࠷దԽฤ

  32. ը૾ܗࣜͷબ୒

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

  34. ը૾ܗࣜͷબ୒

  35. ը૾ͷϦαΠζ

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

  37. TSDTFUଐੑ

  38. ը૾ͷѹॖ

  39. ը૾ͷѹॖϥΠϒϥϦ wNP[KQFHKQFHUBOKQFHPQUJN 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 wOQNJOTUBMMJNBHFNJODMJ wOQNJOTUBMMJNBHFNJOQOHRVBOU wJNBHFNJOŠQMVHJOQOHRVBOUŠPVU EJSCBSGPP

  43. ը૾ͷ஗Ԇಡࠐ

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

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

  46. 8FCϑΥϯτฤ

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

  48. 1SFMPBE

  49. )551 $%/

  50. None

  51. ଎౓վળͷ݁Ռ

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

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

  54. ը૾ѹॖͷࣗಈԽ

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

  56. IVTLZઃఆྫ

  57. None

  58. ϞχλϦϯάͷڧԽ

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

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

  61. None
  62. None