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
620
モダンとレガシー #gotandaem
rymizuki
0
510
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
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
物価高なラスベガスでの過ごし方
zakky
0
370
Autify Company Deck
autifyhq
1
39k
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
27
12k
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
460
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
端末が簡単にリモートから操作されるデモを通じて ソフトウェアサプライチェーン攻撃対策の重要性を理解しよう
kitaji0306
0
170
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
490
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
270
フルカイテン株式会社 採用資料
fullkaiten
0
36k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
What's in a price? How to price your products and services
michaelherold
243
12k
Agile that works and the tools we love
rasmusluckow
327
21k
Visualization
eitanlees
144
15k
Documentation Writing (for coders)
carmenintech
65
4.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Automating Front-end Workflow
addyosmani
1365
200k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
How GitHub (no longer) Works
holman
311
140k
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 おためしあれ!
ご清聴 ありがとうございました