Increase build speed for Nuxt.js Increase build speed for Nuxt.js @sunecosuri Date: 2019-05-14 Vue night in Fukuoka #3

GMOϖύϘΤϯδχΞ ϚΠϒʔϜɿɹͪΐͬͱ͍͍ۺԼΛཤ͘͜ͱ @sunecosuriʢ໐ւ ߂ًʣ

͖͔͚ͬ https://github.com/nuxt/nuxt.js/issues/5131 Increase the Build Speed ΑΓൈਮ ։ ൃ Λ ͠ ͯ ͍ ͘ ʹ ͭ Ε ɺ Ϗ ϧ υ ଎ ౓ ͕ ஗ ͘ ͳ ͬͯ ͍ Δ ؾ ͕ ͢ Δ ͱ ײ ͡ ͯ ͍ ͨ ͱ ͜ Ζ 
 ͜ Μ ͳ i s s u e ͕

࿩͢͜ͱ n u x t ͷ b u i l d Λ ૣ ͘ ͢ Δ 3 ͭ ͷ o p t i o n ʹ ͭ ͍ ͯ b u i l d ଎ ౓ ͷ ൺ ֱ ΍ ͬͯ Έ ͨ ۩ ମ త ʹ Ͳ ͷ Α ͏ ʹ ར ༻ ͢ Δ ΂ ͖ ͔

nuxtͷbuildΛૣ͘͢Δ
 3ͭͷoptionʹ͍ͭͯ

nuxtͷbuildΛૣ͘͢Δ
 3ͭͷoptionʹ͍ͭͯ Webpack

parallel parallel t h r e a d - l o a d e r ϑΝΠϧ୯ҐͰϚϧνεϨουͰloaderΛ࣮ߦͯ͘͠ΕΔ workerϓϩηεΛࣄલʹىಈͯ͠ฒྻ࣮ߦ͢ΔΑ͏ʹ͍ͯ͠Δ

cache cache c a c h e - l o a d e r ϑΝΠϧͷߋ৽೔࣌ΛϕʔεʹΩϟογϡ͢Δ͜ͱ Ͱىಈޙͷ2ճ໨Ҏ߱ͷϏϧυ͸ࠩ෼͚ͩߦͬͯ͘ ΕΔ t e r s e r - w e b p a c k - p l u g i n Terser ͱ͍͏ύοέʔδΛར༻ͯ͠ minify ͯ͘͠ ΕΔ

hardSource hardSource H a r d S o u r c e W e b p a c k P l u g i n node_modules/ ഑ԼʹதؒΩϟογϡͱͯ͠อ࣋ ͓ͯ͘͜͠ͱͰॳճҠߦ͸ͦͪΒΛࢀর͢ΔΑ͏ ʹ͢Δ͜ͱͰϏϧυ࣌ؒΛ୹ॖ͢Δ࢓૊Έ ΩϟογϡΛ࡞੒͢ΔͨΊͷ࠷ॳͷϏϧυ࣌ɺ
 ଟ͘ͷ࡞ۀ͕ॏෳ͢Δ͜ͱͰฦ͕͔͔ͬͯ࣌ؒΔ ͨΊ c a c h e o p t i o n ͱ ͷ ซ ༻ ͸ ඇ ਪ ঑ https://github.com/webpack-contrib/cache-loader/issues/11

ͦΕͧΕͰܭଌͯ͠Έ·ͨ͠

ܭଌ؀ڥ T y p e S c r i p t * N u x t * E x p r e s s ͷ Ϧ ϙ δ τ Ϧ . t s ϑ Ν Π ϧ ਺ : 3 7 5 ߦ ਺ : 1 5 2 9 0 . v u e 
 ϑ Ν Π ϧ ਺ : 1 9 0 
 ߦ ਺ : 6 5 7 3 ※ c a c h e , h a r d S o u r c e ͷ 2 ͭ ͸ ॳ ճ Ϗ ϧ υ ࣌ ʹ Ω ϟ ο γ ϡ ͢ Δ ͷ Ͱ 2 ճ ໨ ͷ Ϗ ϧ υ Ͱ ܭ ଌ Λ ߦ ͏ ※ F o r k T s C h e c k e r ΋ ར ༻

Server Client 0 35000 70000 105000 140000 ઃఆͳ͠ parallel: true cache: true hardSource: true cache, parallel Λ true hardSource, parallel Λ true 122ඵ 68ඵ 53ඵ 70ඵ 110ඵ 58ඵ Ms छผ

hardSource ͕
 ະઃఆ࣌ͱൺֱͯ͠ 69ඵ (໿43ˋ) ͷ࡟ݮʂʂ

Experimental ͱ͸͍͑ Experimental • ؀ڥม਺Ͱ൑ఆͯ͠development࣌ͷΈར༻ͱ͔Ͱ࢖͏ͱϏϧυ଴ͪগͳ͘ͳΔͷͰ։ൃମݧతʹྑ͍͔΋ • සൟʹมߋ͕͔͔ΔͱHMR࣌ʹclash ͢Δͱ͖͕͋Δ
 rm -rf ./node_modules/.cache/hardSource Λ࣮ߦͯ͠cacheΛ࡟আͯ͋͛͠ΔͱΑ͍ • ଎౓ࢦඪͰݟΔͱhardSource͕଎͍͕҆ఆੑͰ͍͏ͱparallel, cache ซ༻͕ମײϨϕϧͰ͸Αͦ͞͏

ײ૝ͱ·ͱΊ •ϑϥάΛม͑Δ͚ͩͰϏϧυͷߴ଎Խ͕Ͱ͖ΔͷͰศར •Nuxt ʹ࠷దԽ࣮ͯ͠૷͞Ε͍ͯΔҰํͰɺࣗલͰΩϟογϡσΟϨΫτϦͳͲ
 ࡉ͔͘ઃఆ͍ͨ͠৔߹ͳͲ͸۪௚ʹloaderΛೖΕͯ͋͛ͨ΄͏͕͍͍ •଎౓Ͱ͍͏ͱ hardSource͕ѹ౗త͚ͩͲɺparallel ͱ cache ซ༻ͷ΄͏͕҆ఆੑͱͯ͠ ͸ߴ͍͔΋͠Εͳ͍

͓͠·͍ ͓͠·͍