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

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. ご清聴 ありがとうございました