続 Nuxt.js 移行プロジェクトの話

note engineer meetup #2 での登壇資料です。
note の Vue Fes Japan 後の取り組み、Nuxt.js の update to v2.4.3 の話や、Code Splitting について話をしました

Transcript

1. Daichi Ishikawa note engineer meetup #2 ଓNuxt.jsҠߦϓϩδΣΫτͷ࿩
2. Daichi Ishikawa / @nicedchy 2018/11 - piece of cake, inc. note ͷ ϑϩϯτΤϯυϦϓϨΠεΛ୲౰ Vue.js Japan User Group Staff Who am I
4. Work in Progress Release note https://note.mu/noteeng/m/me7637ba82821
5. Context note https://note.mu/r82/n/ne217ba36d233
6. ɾVue Fes Japan ޙͷऔΓ૊Έ ɾNuxt.js update to v2.4.3 ɾCode Splitting & Lazy Load Components Agenda
7. Agenda ɾVue Fes Japan ޙͷऔΓ૊Έ ɾNuxt.js update to v2.4.3 ɾCode Splitting & Lazy Load Components
8. Infrastructure ɹɾ͞Α͏ͳΒ
   Lambda
   
   ɹɾ͜Μʹͪ͸
   ElasticBeanstalk
   
   Test ɹɾe2e test
   Λ
   mabl
   ΁Ҡߦத⚡
   Storybook ɹɾStorybook
   Λ
   test
   ؀ڥͰϗεςΟϯά
   
   Team ɹɾnote
   վળνʔϜʹ௥͍ͭ͘
   Follow Up Day
   ։࠵
   
   ɹɾνʔϜ͕
   ਓ
   ˠ
   ਓʹεέʔϧΞοϓ
   
   Release ɹɾը໘ϦϦʔε
   Vue Fes Japan ޙͷऔΓ૊Έ
9. Agenda ɾVue Fes Japan ޙͷऔΓ૊Έ ɾNuxt.js update to v2.4.3 ɾCode Splitting & Lazy Load Components
10. Migration @nuxtjs/style-resources => nuxt-sass-resorces-loader ͷαϙʔτऴྃ Nuxt.js update to v2.4.3
11. ৽͍͠ػೳͰ note ʹ΋Ըܙ͕✨ ɾTypeScript Support ✨ ɹ=> TypeScript ؀ڥ΁ WIP ɾSmart Prefetch ✨ ɹ=> notedemo ͷ ɹɹ ϖʔδભҠͰମݧͰ͖·͢ Nuxt.js update to v2.4.3
12. Agenda ɾVue Fes Japan ޙͷऔΓ૊Έ ɾNuxt.js update to v2.4.3 ɾCode Splitting & Lazy Load Components
13. ։ൃա౉ظͰ Bundle ϑΝΠϧαΠζ͕૿Ճ͠ॳճϨϯμϦϯά͕՝୊ Code Splitting & Lazy Load Components app.js: 665KB
14. ͳͥ Code Splitting Λ΍Δͷ͔ ɾFMP·Ͱͷ࣌ؒ࡟ݮʢSSRͰͦ΋ͦ΋ૣ͍͕ʣ ɾϢʔβʔͷૢ࡞ʹԠ౴Ͱ͖Δ࣌ؒ࡟ݮ note ʹͱͬͯϢʔβʔ͕ίϯςϯπΛӾཡ͢Δ·Ͱͷ࣌ ؒΛ୹͘͢Δͷ͸ॏཁͳࢦඪͷҰͭ Code Splitting & Lazy Load Components
15. How to Dynamic Imports on Nuxt.js Code Splitting & Lazy Load Components Nuxt.js ެࣜ example
 https://github.com/nuxt/nuxt.js/tree/dev/examples/dynamic-components
16. After Dynamic Imports app.js: 665KB → 215KB vendors.app.js ͱ modals.js ͸ϨϯμϦϯάʹӨڹͦ͠͏ Code Splitting & Lazy Load Components modals.js ͸ॳճͷϨϯμϦϯάʹؔ܎͕ͳ͍ͷͰඇಉظʹ
17. How to Lazy Loading Components on Nuxt.js Code Splitting & Lazy Load Components Vue.js ެࣜ Docs
 https://jp.vuejs.org/v2/guide/components-dynamic-async.html#ඇಉظίϯ ϙʔωϯτ
18. After Dynamic Imports & Lazy Loading Components Code Splitting & Lazy Load Components
19. RESULT Code Splitting & Lazy Load Components
20. Page Load Times Code Splitting & Lazy Load Components firstByte: 1.87s → 1.12s loadTime: 8.28s → 6.89s fullyLoaded: 8.56s → 7.17s
21. Rendering Times Code Splitting & Lazy Load Components firstPaint: 3.65s → 2.9s speedIndex: 6.6s→ 5.43s visualComplete: 8.35s→6.92s
22. ஍ಓͳվળ Code Splitting & Lazy Load Components
23. දࣔ଎౓Λ্͛ΔͨΊͷ՝୊ ɾLodash ( vendors.app.js ) ɾBackend API ͷϨεϙϯε ɾImage ͷॲཧ Code Splitting & Lazy Load Components
24. We are hiring ஍ಓͳվળΛ͢ΔΤϯδχΞืूத https://www.wantedly.com/projects/208206
25. ༨ஊ Angular.js ͱ Nuxt.js Λൺ΂ͯΈΔ
26. Angular.js (production)
27. Nuxt.js (production demo)
28. ࣍ճ༧ࠂ
29. Frontend de KANPAI! #6-ΈΜͳͷαʔϏεͮ͘Γ- ࣍ճ༧ࠂ https://frokan.connpass.com/event/120702/
30. Thanks!