Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webpackのビルド時間を1/3にした話 #gotandajs
Search
mizuki_r
October 06, 2017
Technology
9
4.1k
Webpackのビルド時間を1/3にした話 #gotandajs
GotandaJS #9の発表資料です
mizuki_r
October 06, 2017
Tweet
Share
More Decks by mizuki_r
See All by mizuki_r
税理士ドットコムの 技術的挑戦 #tapioca_lt
rymizuki
0
250
PHPを始めて1年、レガシーシステムにどう向き合っているか #phpstudy
rymizuki
1
610
モダンとレガシー #gotandaem
rymizuki
0
500
Vuexに型を付けるパターンを調べた #gotandajs
rymizuki
0
110
DockerでNodeの開発は厳しいのか? #gotandajs
rymizuki
3
340
マネージャー!きみは何者だ! #gotandaem
rymizuki
0
1.6k
物語を楽しむための物語論
rymizuki
0
480
失敗と向き合う
rymizuki
0
1.3k
社内勉強会と組織の成長を考える
rymizuki
1
2.5k
Other Decks in Technology
See All in Technology
Tracking down sources of kernel errors with retsnoop
ennael
PRO
0
130
つよつよリーダーが 抜けたらどうする? 〜ナビタイムのAgile⽀援組織の変遷〜
navitimejapan
PRO
22
12k
Sansanにおける全社横断データ分析基盤の挑戦と未来 / Challenges and Future of Cross-Organizational Data Analytics Platform at Sansan
sansan_randd
2
300
PREEMPT_RT over the years
ennael
PRO
0
250
エンジニアは伝え方が9割/90% of what engineers need is communication skills
ykanoh
2
140
【swonet.conf_】NOCメンバーが語るSTMの実態!! ~ShowNetから若者への贈り物~
shownet
PRO
0
210
XP matsuri 2024 - 銀河英雄伝説に学ぶ
kawaguti
PRO
3
440
ORM と向き合う
hoto17296
7
5.6k
How CERN serves 1EB of data via FUSE
ennael
PRO
0
15k
【shownet.conf_】ShowNet x 宇宙ネットワーク
shownet
PRO
0
270
マルチAWSアカウント間のストリーミングによるデータ同期/AWS SaaS Builders Forum 2024
visional_engineering_and_design
1
110
【shownet.conf_】3Dアプローチで守るセキュリティ
shownet
PRO
0
250
Featured
See All Featured
Embracing the Ebb and Flow
colly
83
4.4k
Into the Great Unknown - MozCon
thekraken
29
1.4k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
104
48k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
How STYLIGHT went responsive
nonsquared
93
5.1k
The Mythical Team-Month
searls
218
43k
BBQ
matthewcrist
83
9.2k
Gamification - CAS2011
davidbonilla
79
5k
The Straight Up "How To Draw Better" Workshop
denniskardys
231
130k
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 おためしあれ!
ご清聴 ありがとうございました