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

Nuxt.js のbuid速度が早くなるオプションのいくつかについて / Increase-build-speed-for-Nuxt.js

Nuxt.js のbuid速度が早くなるオプションのいくつかについて / Increase-build-speed-for-Nuxt.js

0631f2e33b42847ae5dedbdd53e1c1a4?s=128

sunecosuri

May 14, 2019
Tweet

Transcript

  1. Increase build speed for Nuxt.js Increase build speed for Nuxt.js

    @sunecosuri Date: 2019-05-14 Vue night in Fukuoka #3
  2. GMOϖύϘΤϯδχΞ ϚΠϒʔϜɿɹͪΐͬͱ͍͍ۺԼΛཤ͘͜ͱ @sunecosuriʢ໐ւ ߂ًʣ

  3. ͖͔͚ͬ https://github.com/nuxt/nuxt.js/issues/5131 Increase the Build Speed ΑΓൈਮ ։ ൃ Λ

    ͠ ͯ ͍ ͘ ʹ ͭ Ε ɺ Ϗ ϧ υ ଎ ౓ ͕ ஗ ͘ ͳ ͬͯ ͍ Δ ؾ ͕ ͢ Δ ͱ ײ ͡ ͯ ͍ ͨ ͱ ͜ Ζ 
 ͜ Μ ͳ i s s u e ͕
  4. ࿩͢͜ͱ n u x t ͷ b u i l

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

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

  7. parallel parallel t h r e a d - l

    o a d e r ϑΝΠϧ୯ҐͰϚϧνεϨουͰloaderΛ࣮ߦͯ͘͠ΕΔ workerϓϩηεΛࣄલʹىಈͯ͠ฒྻ࣮ߦ͢ΔΑ͏ʹ͍ͯ͠Δ
  8. 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 ͯ͘͠ ΕΔ
  9. 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
  10. ͦΕͧΕͰܭଌͯ͠Έ·ͨ͠

  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 ΋ ར ༻
  12. 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 छผ
  13. hardSource ͕
 ະઃఆ࣌ͱൺֱͯ͠ 69ඵ (໿43ˋ) ͷ࡟ݮʂʂ

  14. Experimental ͱ͸͍͑ Experimental • ؀ڥม਺Ͱ൑ఆͯ͠development࣌ͷΈར༻ͱ͔Ͱ࢖͏ͱϏϧυ଴ͪগͳ͘ͳΔͷͰ։ൃମݧతʹྑ͍͔΋ • සൟʹมߋ͕͔͔ΔͱHMR࣌ʹclash ͢Δͱ͖͕͋Δ
 rm -rf

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

    ͸ߴ͍͔΋͠Εͳ͍
  16. ͓͠·͍ ͓͠·͍