Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Webpackのビルド時間を1/3にした話 #gotandajs
mizuki_r
October 06, 2017
Technology
9
3.6k
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
170
PHPを始めて1年、レガシーシステムにどう向き合っているか #phpstudy
rymizuki
1
370
モダンとレガシー #gotandaem
rymizuki
0
320
Vuexに型を付けるパターンを調べた #gotandajs
rymizuki
0
83
DockerでNodeの開発は厳しいのか? #gotandajs
rymizuki
3
260
マネージャー!きみは何者だ! #gotandaem
rymizuki
0
1.2k
物語を楽しむための物語論
rymizuki
0
390
失敗と向き合う
rymizuki
0
890
社内勉強会と組織の成長を考える
rymizuki
1
2k
Other Decks in Technology
See All in Technology
Whats new in Android Media?
myolwin00
2
120
プログラミング未経験の学生をエンジニアにしてきたノウハウを公開
shinofumijp
0
190
個人的に使って良かったUiPathアクティビティ
saoritakita
0
270
AWS ChatbotでEC2インスタンスを 起動できるようにした
iwamot
0
170
A Conditional Point Diffusion-Refinement Paradigm for 3D Point Cloud Completion
takmin
0
230
srenext2022-skaru
mixi_engineers
PRO
1
1k
toilを解消した話
asumaywy
0
220
Dagu | オンプレ向けワークフローエンジン(WebUI 同梱)
yohamta
1
210
runn is a package/tool for running operations following a scenario. / golang.tokyo #32
k1low
1
240
プロダクション環境の信頼性を損ねず観測する技術
egmc
4
860
[SRE NEXT 2022]KaaS桶狭間の戦い 〜Yahoo! JAPANのSLI/SLOを用いた統合監視〜
srenext
0
620
LIFF Deep Dive 2022
line_developers
PRO
1
790
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
350
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Bash Introduction
62gerente
596
210k
The Pragmatic Product Professional
lauravandoore
19
2.9k
Raft: Consensus for Rubyists
vanstee
126
5.4k
Automating Front-end Workflow
addyosmani
1351
200k
Producing Creativity
orderedlist
PRO
333
37k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
How to train your dragon (web standard)
notwaldorf
57
3.8k
It's Worth the Effort
3n
172
25k
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 おためしあれ!
ご清聴 ありがとうございました