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

GotandaJS #9の発表資料です

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
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. あれ…？
43. まとめ
44. まとめ • thread-loaderͰWorkerPoolͰॲཧ͢Δ͜ͱͰ ଟগͳΓͱ଎౓͕վળ͢Δ • cache-loader࢖͏͜ͱͰඞཁͳ෦෼͚ͩͷϏ ϧυͰࡁΉͷͰ࣌ؒͷ୹ॖʹͳΔ
45. node-sassは？ • thread-loader͍ΕͨΒͳΜ͔ॲཧ͕ࢭ·Δ… • fast-sass-loaderͳΔ΋ͷ͕͋Δ • ͕ɺfunctions͕࣮૷͞Εͯͳ͔ͬͨ • cacheͰߴ͍վળ͕Ͱ͖ͨͷͰҰ୴ڐ༰
46. それでも 最大1/3 おためしあれ！
47. ご清聴 ありがとうございました