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

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

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

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

054deedcc25cbeacb6cd34c43b7df26a?s=128

Daichi Ishikawa

February 21, 2019
Tweet

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
  3. None
  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!