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

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

mizuki_r
October 06, 2017

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

GotandaJS #9の発表資料です

mizuki_r

October 06, 2017
Tweet

More Decks by mizuki_r

Other Decks in Technology

Transcript

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

    View full-size slide

  2. @mizuki_r
    • シニアフロントエンドエンジニア
    • エンジニア
    2
    #javascript #gotandajs
    #meguroes #perl #kichijojipm
    五反田のM社で位置ゲー開発に携わる。

    スクラム教に入信したって噂。DDDを
    ようやく真面目に学び始めた
    about me
    こんな人です

    View full-size slide

  3. 本題の前にちょっと
    プロモーション

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6.  …基本的な話です 

    View full-size slide

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

    View full-size slide

  8. ことの背景

    View full-size slide

  9. ある巨大リポジトリ

    View full-size slide

  10. 巨大…
    • JavaScript
    • 781ϑΝΠϧɺ25934ߦɺ808610จࣈ
    • CoffeeScript
    • 336ϑΝΠϧɺ10266ߦɺ338988จࣈ
    • SCSS
    • 361ϑΝΠϧɺ43304ߦɺ1088861จࣈ
    • and moreʂ

    View full-size slide

  11. ビルド時間
    Execution Time (2017-10-05 00:12:15 UTC)
    webpack 2m 10.7s
    Total 2m 11.9s

    View full-size slide

  12. もっと早くしたい…

    View full-size slide

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

    View full-size slide

  14. 最新の安定版を使え
    Use the latest webpack version. We are always
    making performance improvements. The latest stable
    version of webpack is:

    View full-size slide

  15. 必要最低限のモジュールをロー
    ドする
    Apply loaders to the minimal number of modules
    necessary.

    View full-size slide

  16. 小さい少数のモジュールを使

    Each additional loader/plugin has a bootup time. Try
    to use as few different tools as possible.

    View full-size slide

  17. resolveは最小限に
    • resolve.extensions
    • resolve.modules
    • resolve.mainFiles
    • resolve.descriptionFiles
    • etc….

    View full-size slide

  18. 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.

    View full-size slide

  19. Smaller = Faster
    Decrease the total size of the compilation to
    ncrease build performance. Try to keep chunks small.

    View full-size slide

  20. thread-loader使え
    The thread-loader can be used to offload expensive
    loaders to a worker pool.

    View full-size slide

  21. cache-loader使え
    Enable persistent caching with the cache-loader.
    Clear cache directory on "postinstall" in package.json.

    View full-size slide

  22. 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.

    View full-size slide

  23. そもそも

    View full-size slide

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

    View full-size slide

  25. それでもなんとかできないか?

    View full-size slide

  26. thread-loader

    View full-size slide

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

    View full-size slide

  28. cache-loader

    View full-size slide

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

    View full-size slide

  30. webpack.config.js

    View full-size slide

  31. Execution Time (2017-10-05 00:37:56 UTC)
    webpack 1m 58.6s
    Total 1m 59.8s
    ✨ Done in 125.42s.

    View full-size slide

  32. まあ、まだキャッシュ
    乗ってないので….

    View full-size slide

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

    View full-size slide

  34. だいたい1/3!!!

    View full-size slide

  35. あれ…?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide