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

by Daichi Ishikawa

Slide 1

Slide 1 text

Daichi Ishikawa note engineer meetup #2 ଓNuxt.jsҠߦϓϩδΣΫτͷ࿩

Slide 2

Slide 2 text

Daichi Ishikawa / @nicedchy 2018/11 - piece of cake, inc. note ͷ ϑϩϯτΤϯυϦϓϨΠεΛ୲౰ Vue.js Japan User Group Staff Who am I

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Work in Progress Release note https://note.mu/noteeng/m/me7637ba82821

Slide 5

Slide 5 text

Context note https://note.mu/r82/n/ne217ba36d233

Slide 6

Slide 6 text

ɾVue Fes Japan ޙͷऔΓ૊Έ ɾNuxt.js update to v2.4.3 ɾCode Splitting & Lazy Load Components Agenda

Slide 7

Slide 7 text

Agenda ɾVue Fes Japan ޙͷऔΓ૊Έ ɾNuxt.js update to v2.4.3 ɾCode Splitting & Lazy Load Components

Slide 8

Slide 8 text

Infrastructure ɹɾ͞Α͏ͳΒLambda ɹɾ͜Μʹͪ͸ElasticBeanstalk Test ɹɾe2e testΛmabl΁Ҡߦத⚡ Storybook ɹɾStorybookΛtest؀ڥͰϗεςΟϯά Team ɹɾnoteվળνʔϜʹ௥͍ͭ͘Follow Up Day։࠵ ɹɾνʔϜ͕ਓˠਓʹεέʔϧΞοϓ Release ɹɾը໘ϦϦʔε Vue Fes Japan ޙͷऔΓ૊Έ

Slide 9

Slide 9 text

Agenda ɾVue Fes Japan ޙͷऔΓ૊Έ ɾNuxt.js update to v2.4.3 ɾCode Splitting & Lazy Load Components

Slide 10

Slide 10 text

Migration @nuxtjs/style-resources => nuxt-sass-resorces-loader ͷαϙʔτऴྃ Nuxt.js update to v2.4.3

Slide 11

Slide 11 text

৽͍͠ػೳͰ note ʹ΋Ըܙ͕✨ ɾTypeScript Support ✨ ɹ=> TypeScript ؀ڥ΁ WIP ɾSmart Prefetch ✨ ɹ=> notedemo ͷ ɹɹ ϖʔδભҠͰମݧͰ͖·͢ Nuxt.js update to v2.4.3

Slide 12

Slide 12 text

Agenda ɾVue Fes Japan ޙͷऔΓ૊Έ ɾNuxt.js update to v2.4.3 ɾCode Splitting & Lazy Load Components

Slide 13

Slide 13 text

։ൃա౉ظͰ Bundle ϑΝΠϧαΠζ͕૿Ճ͠ॳճϨϯμϦϯά͕՝୊ Code Splitting & Lazy Load Components app.js: 665KB

Slide 14

Slide 14 text

ͳͥ Code Splitting Λ΍Δͷ͔ ɾFMP·Ͱͷ࣌ؒ࡟ݮʢSSRͰͦ΋ͦ΋ૣ͍͕ʣ ɾϢʔβʔͷૢ࡞ʹԠ౴Ͱ͖Δ࣌ؒ࡟ݮ note ʹͱͬͯϢʔβʔ͕ίϯςϯπΛӾཡ͢Δ·Ͱͷ࣌ ؒΛ୹͘͢Δͷ͸ॏཁͳࢦඪͷҰͭ Code Splitting & Lazy Load Components

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

After Dynamic Imports app.js: 665KB → 215KB vendors.app.js ͱ modals.js ͸ϨϯμϦϯάʹӨڹͦ͠͏ Code Splitting & Lazy Load Components modals.js ͸ॳճͷϨϯμϦϯάʹؔ܎͕ͳ͍ͷͰඇಉظʹ

Slide 17

Slide 17 text

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#ඇಉظίϯ ϙʔωϯτ

Slide 18

Slide 18 text

After Dynamic Imports & Lazy Loading Components Code Splitting & Lazy Load Components

Slide 19

Slide 19 text

RESULT Code Splitting & Lazy Load Components

Slide 20

Slide 20 text

Page Load Times Code Splitting & Lazy Load Components firstByte: 1.87s → 1.12s loadTime: 8.28s → 6.89s fullyLoaded: 8.56s → 7.17s

Slide 21

Slide 21 text

Rendering Times Code Splitting & Lazy Load Components firstPaint: 3.65s → 2.9s speedIndex: 6.6s→ 5.43s visualComplete: 8.35s→6.92s

Slide 22

Slide 22 text

஍ಓͳվળ Code Splitting & Lazy Load Components

Slide 23

Slide 23 text

දࣔ଎౓Λ্͛ΔͨΊͷ՝୊ ɾLodash ( vendors.app.js ) ɾBackend API ͷϨεϙϯε ɾImage ͷॲཧ Code Splitting & Lazy Load Components

Slide 24

Slide 24 text

We are hiring ஍ಓͳվળΛ͢ΔΤϯδχΞืूத https://www.wantedly.com/projects/208206

Slide 25

Slide 25 text

༨ஊ Angular.js ͱ Nuxt.js Λൺ΂ͯΈΔ

Slide 26

Slide 26 text

Angular.js (production)

Slide 27

Slide 27 text

Nuxt.js (production demo)

Slide 28

Slide 28 text

࣍ճ༧ࠂ

Slide 29

Slide 29 text

Frontend de KANPAI! #6-ΈΜͳͷαʔϏεͮ͘Γ- ࣍ճ༧ࠂ https://frokan.connpass.com/event/120702/

Slide 30

Slide 30 text

Thanks!