Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
Webpackのビルド時間を1/3にした話 #gotandajs
mizuki_r
October 06, 2017
Technology
8
3.2k
Webpackのビルド時間を1/3にした話 #gotandajs
GotandaJS #9の発表資料です
mizuki_r
October 06, 2017
Tweet
Share
More Decks by mizuki_r
See All by mizuki_r
rymizuki
0
95
rymizuki
1
270
rymizuki
0
230
rymizuki
0
59
rymizuki
3
220
rymizuki
0
940
rymizuki
0
370
rymizuki
0
720
rymizuki
1
1.8k
Other Decks in Technology
See All in Technology
shomaekawa
3
1k
kanaugust
PRO
0
210
yokatsuki
0
190
shirayanagiryuji
1
400
saoritakita
0
340
shirayanagiryuji
0
1.5k
ocise
0
110
oracle4engineer
1
210
vkbaba
0
100
suzukiry
0
200
tsuyo
0
180
cmwatanabeseigo
0
320
Featured
See All Featured
holman
461
280k
keithpitt
401
20k
pauljervisheath
196
15k
aarron
258
36k
holman
448
130k
roundedbygravity
241
21k
hatefulcrawdad
257
17k
akmur
252
19k
garrettdimon
287
110k
schacon
145
6.6k
mojombo
358
62k
bryan
100
11k
Transcript
Webpackのビルド時間を 1/3にした話 2017/10/06 Gotanda.js #9 @mizuki_r
@mizuki_r • シニアフロントエンドエンジニア • エンジニア 2 #javascript #gotandajs #meguroes #perl
#kichijojipm 五反田のM社で位置ゲー開発に携わる。 スクラム教に入信したって噂。DDDを ようやく真面目に学び始めた about me こんな人です
本題の前にちょっと プロモーション
Syntagme.js v1.0.0 リリースしました ٩(๑´3`๑)۶ https://github.com/rymizuki/syntagmejs/releases/tag/v1.0.0
本題
Webpackのビルド時間を 1/3にした話
…基本的な話です
結論
結論 • thread-loader • cache-loader
はい
ことの背景
ある巨大リポジトリ
巨大… • JavaScript • 781ϑΝΠϧɺ25934ߦɺ808610จࣈ • CoffeeScript • 336ϑΝΠϧɺ10266ߦɺ338988จࣈ •
SCSS • 361ϑΝΠϧɺ43304ߦɺ1088861จࣈ • and moreʂ
ビルド時間 Execution Time (2017-10-05 00:12:15 UTC) webpack 2m 10.7s Total
2m 11.9s
もっと早くしたい…
Buld Performance https://webpack.js.org/guides/build-performance/
最新の安定版を使え Use the latest webpack version. We are always making
performance improvements. The latest stable version of webpack is:
必要最低限のモジュールをロー ドする Apply loaders to the minimal number of modules
necessary.
小さい少数のモジュールを使 え Each additional loader/plugin has a bootup time. Try
to use as few different tools as possible.
resolveは最小限に • resolve.extensions • resolve.modules • resolve.mainFiles • resolve.descriptionFiles •
etc….
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.
Smaller = Faster Decrease the total size of the compilation
to ncrease build performance. Try to keep chunks small.
thread-loader使え The thread-loader can be used to offload expensive loaders
to a worker pool.
cache-loader使え Enable persistent caching with the cache-loader. Clear cache directory
on "postinstall" in package.json.
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.
そもそも
3年の重み • grunt-contrib-coffeeͰconcat͢Δ࣌ͷίʔυ͕·ͩେྔʹ͋Δ • webpackͷίʔυҠͷ్த • coffeeͱes2015ͷؒͷࢠ • େͳscss…. •
angular 1.x ….. • ྺ࢙͕ॏ͍
それでもなんとかできないか?
thread-loader
thread-loader • WorkerPoolΛ༻ҙͯ͠ɺͦͷதͰloaderͰ࣮ߦ͢ Δ • ෳεϨουͰ࣮ߦͰ͖Δ • σϑΥϧτͰ20JobΛฒྻͰಈ͔͢ • node-sass͕ϒϩοΫͯ͠·͏ͷղܾࡦ
cache-loader
cache-loader • ϑΝΠϧͷmtimeͰΩϟογϡ͠ͱ͘
webpack.config.js
None
None
result
Execution Time (2017-10-05 00:37:56 UTC) webpack 1m 58.6s Total 1m
59.8s ✨ Done in 125.42s.
まあ、まだキャッシュ 乗ってないので….
Execution Time (2017-10-05 00:40:48 UTC) webpack 33.8s Total 35.3s ✨
Done in 40.71s.
だいたい1/3!!!
あれ…?
None
まとめ
まとめ • thread-loaderͰWorkerPoolͰॲཧ͢Δ͜ͱͰ ଟগͳΓͱ͕վળ͢Δ • cache-loader͏͜ͱͰඞཁͳ෦͚ͩͷϏ ϧυͰࡁΉͷͰ࣌ؒͷॖʹͳΔ
node-sassは? • thread-loader͍ΕͨΒͳΜ͔ॲཧ͕ࢭ·Δ… • fast-sass-loaderͳΔͷ͕͋Δ • ͕ɺfunctions͕࣮͞Εͯͳ͔ͬͨ • cacheͰߴ͍վળ͕Ͱ͖ͨͷͰҰ୴ڐ༰
それでも 最大1/3 おためしあれ!
ご清聴 ありがとうございました