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
520
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
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
170
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
4
230
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
510
AI前提のサービス運用ってなんだろう?
ryuichi1208
8
1.4k
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
190
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
100
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
180
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
13k
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Bash Introduction
62gerente
608
210k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Code Review Best Practice
trishagee
64
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
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 おためしあれ!
ご清聴 ありがとうございました