Webpackのビルド時間を1/3にした話 #gotandajs

E1dbe585427fa87cbfb0f4dbcebc3b2f?s=47 mizuki_r
October 06, 2017

Webpackのビルド時間を1/3にした話 #gotandajs

GotandaJS #9の発表資料です

E1dbe585427fa87cbfb0f4dbcebc3b2f?s=128

mizuki_r

October 06, 2017
Tweet

Transcript

  1. Webpackのビルド時間を  1/3にした話  2017/10/06 Gotanda.js #9 @mizuki_r

  2. @mizuki_r • シニアフロントエンドエンジニア • エンジニア 2 #javascript #gotandajs #meguroes #perl

    #kichijojipm 五反田のM社で位置ゲー開発に携わる。
 スクラム教に入信したって噂。DDDを ようやく真面目に学び始めた about me こんな人です
  3. 本題の前にちょっと プロモーション

  4. Syntagme.js v1.0.0 リリースしました ٩(๑´3`๑)۶  https://github.com/rymizuki/syntagmejs/releases/tag/v1.0.0

  5. 本題 

  6. Webpackのビルド時間を  1/3にした話 

  7.  …基本的な話です 

  8. 結論

  9. 結論 • thread-loader • cache-loader

  10. はい

  11. ことの背景

  12. ある巨大リポジトリ

  13. 巨大… • JavaScript • 781ϑΝΠϧɺ25934ߦɺ808610จࣈ • CoffeeScript • 336ϑΝΠϧɺ10266ߦɺ338988จࣈ •

    SCSS • 361ϑΝΠϧɺ43304ߦɺ1088861จࣈ • and moreʂ
  14. ビルド時間 Execution Time (2017-10-05 00:12:15 UTC) webpack 2m 10.7s Total

    2m 11.9s
  15. もっと早くしたい…

  16. Buld Performance https://webpack.js.org/guides/build-performance/

  17. 最新の安定版を使え Use the latest webpack version. We are always making

    performance improvements. The latest stable version of webpack is:
  18. 必要最低限のモジュールをロー ドする Apply loaders to the minimal number of modules

    necessary.
  19. 小さい少数のモジュールを使 え Each additional loader/plugin has a bootup time. Try

    to use as few different tools as possible.
  20. resolveは最小限に • resolve.extensions • resolve.modules • resolve.mainFiles • resolve.descriptionFiles •

    etc….
  21. DLLPlugin使え Use the DllPlugin to move code that is changed

    less often into a separate compilation. This will improve the application's compilation speed, although it does increase complexitity of the build process.
  22. Smaller = Faster Decrease the total size of the compilation

    to ncrease build performance. Try to keep chunks small.
  23. thread-loader使え The thread-loader can be used to offload expensive loaders

    to a worker pool.
  24. cache-loader使え Enable persistent caching with the cache-loader. Clear cache directory

    on "postinstall" in package.json.
  25. node-sassは遅いぞ node-sass has a bug which blocks threads from the

    Node.js threadpool. When using it with the thread- loader set workerParallelJobs: 2.
  26. そもそも

  27. 3年の重み • grunt-contrib-coffeeͰconcat͢Δ࣌୅ͷίʔυ͕·ͩେྔʹ͋Δ • webpack΁ͷίʔυҠ؅ͷ్த • coffeeͱes2015ͷؒͷࢠ • ๲େͳscss…. •

    angular 1.x ….. • ྺ࢙͕ॏ͍
  28. それでもなんとかできないか?

  29. thread-loader

  30. thread-loader • WorkerPoolΛ༻ҙͯ͠ɺͦͷதͰloaderͰ࣮ߦ͢ Δ • ෳ਺εϨουͰ࣮ߦͰ͖Δ • σϑΥϧτͰ20JobΛฒྻͰಈ͔͢ • node-sass͕ϒϩοΫͯ͠·͏໰୊ͷղܾࡦ

  31. cache-loader

  32. cache-loader • ϑΝΠϧͷmtimeͰΩϟογϡ͠ͱ͘

  33. webpack.config.js

  34. None
  35. None
  36. result

  37. Execution Time (2017-10-05 00:37:56 UTC) webpack 1m 58.6s Total 1m

    59.8s ✨ Done in 125.42s.
  38. まあ、まだキャッシュ 乗ってないので….

  39. Execution Time (2017-10-05 00:40:48 UTC) webpack 33.8s Total 35.3s ✨

    Done in 40.71s.
  40. だいたい1/3!!!

  41. あれ…?

  42. None
  43. まとめ

  44. まとめ • thread-loaderͰWorkerPoolͰॲཧ͢Δ͜ͱͰ ଟগͳΓͱ଎౓͕վળ͢Δ • cache-loader࢖͏͜ͱͰඞཁͳ෦෼͚ͩͷϏ ϧυͰࡁΉͷͰ࣌ؒͷ୹ॖʹͳΔ

  45. node-sassは? • thread-loader͍ΕͨΒͳΜ͔ॲཧ͕ࢭ·Δ… • fast-sass-loaderͳΔ΋ͷ͕͋Δ • ͕ɺfunctions͕࣮૷͞Εͯͳ͔ͬͨ • cacheͰߴ͍վળ͕Ͱ͖ͨͷͰҰ୴ڐ༰

  46. それでも 最大1/3 おためしあれ!

  47. ご清聴 ありがとうございました