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による人類共通コンポーネント計画
Search
joe_re
March 11, 2016
Technology
1
8.8k
webpackによる人類共通コンポーネント計画
gotanda.js#3のLT資料です
joe_re
March 11, 2016
Tweet
Share
More Decks by joe_re
See All by joe_re
Building Public API with GraphQL
joere
3
110
Traversing the GraphQL AST and Calculating Query Costs
joere
0
1.1k
Real-Time applications with GraphQL
joere
0
260
Prisma2 with Graphql
joere
3
970
Go beyound static on Netlify
joere
1
310
Building Real-time Vue App
joere
4
4.6k
ReactNativeのAsyncStorageをNodeのReplから操作する
joere
0
330
Mock Native API in your E2E test
joere
2
1.2k
Data feching and caching on Apollo Client
joere
2
2.9k
Other Decks in Technology
See All in Technology
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
220
仕様駆動開発を実現する上流工程におけるAIエージェント活用
sergicalsix
8
3.8k
CLIPでマルチモーダル画像検索 →とても良い
wm3
1
570
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
390
デザインとエンジニアリングの架け橋を目指す OPTiMのデザインシステム「nucleus」の軌跡と広げ方
optim
0
120
OpenCensusと歩んだ7年間
bgpat
0
180
RemoteFunctionを使ったコロケーション
mkazutaka
1
140
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
320
Amazon Athena で JSON・Parquet・Iceberg のデータを検索し、性能を比較してみた
shigeruoda
1
200
Zero Trust DNS でより安全なインターネット アクセス
murachiakira
0
110
20251027_findyさん_音声エージェントLT
almondo_event
2
490
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
690
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.9k
Practical Orchestrator
shlominoach
190
11k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
How GitHub (no longer) Works
holman
315
140k
KATA
mclloyd
PRO
32
15k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Scaling GitHub
holman
463
140k
Transcript
WebpackʹΑΔ ਓྨڞ௨ ίϯϙʔωϯτܭը @joe_re
twitter: @joe_re github: @joe-re - ໊લ: ͡ΐ͏ - freeeͱ͍͏ձࣾͰಇ͍͍ͯ·͢ -
ࠓΫϥυڅ༩ܭࢉͬͯ·͢
React͕಄͠ɺੈք·͞ ʹେίϯϙʔωϯτ࣌ʂʂʂ
ͱ͜ΖͰͦͦ ίϯϙʔωϯτͬͯԿʁʁʁ
DOM͓Αͼ ৼΔ͍͕ఆٛ͞Εͨͷ
ίϯϙʔωϯτࢦʹ͓͚Δ ίϯϙʔωϯτ࠶ར༻Մೳ Ͱͳ͚ΕͳΒͳ͍
࠶ར༻Մೳͳίϯϙʔωϯτ Λ࡞Δʹʁ
ίϯϙʔωϯτ༩͑ΒΕͨ ΛϢʔβͷཧղͰ͖Δ View(DOM)ʹม͢Δɺ DOMมػʹప͢Δ
༩͑ΒΕ͕ͨಉ͡ͳͷʹɺ ҧ͏ϨϯμϦϯά݁Ռʹͳͬ ͍͚ͯͳ͍
ඳըͷݩʹͳΔͷੜϩδο Ϋܾͯ͠ίϯϙʔωϯτʹ ؚΜͰ͍͚ͳ͍ (ͦͷͨΊͷFlux)
ਓྨڞ௨ίϯϙʔωϯτͱ
͜͏͍͏ͷ
͜͏ݟ͑ͯ150ߦͷ ϩδοΫ͕٧·͍ͬͯΔ • ݺͼग़࣌͠ʹmax-minͷൣғܾΊΒΔ • ݄ͷબΛҰϲ݄લʹม͑ͨ࣌ʹɺଘࡏ͠ͳ ͍Λબ͠ͳ͍ (2016/3/31 ➡ 2016/2/29ʹͳΔ)
• ͳͲͳͲ
ڞ௨Խͯ͠ͲͷϓϩμΫτ͔ ΒͰݺΔΑ͏ʹ͍ͨ͠ʂ
ڞ௨ίϯϙʔωϯτͱ͢Δ͜ͱ Ͱ • ڞ௨Ͱ͏Α͏ͳinputɺselectͳͲʹ͓͍ͯɺݟ ͨૢ࡞ੑʹϓϩμΫτ͝ͱʹൃੜ͢ΔΒͭ ͖Λͳͤ͘Δ (freeeϒϥϯυͷΞϓϦέʔγϣϯʹ͓͚Δڞ௨ͷ ݟͨɺৼΔ͍Λ࣋ͨͤΔ) • ࠶ར༻ੑͷߴ͍ίϯϙʔωϯτʹΑΔ։ൃͷޮ
Խ
ҙ • ਓྨڞ௨ͱ͍͍ͭͭɺ͜͜Ͱ͍͏ਓྨʹ 1ͭͷձࣾͷఏڙ͢ΔWebΞϓϦέʔγϣϯͱ ͦΕΛར༻͢ΔϢʔβ͔͠ଘࡏ͠·ͤΜ • Reactͷ༻Λલఏʹ͓͠·͢
Α͠ɺWebpackͩʂ
Webpackͱ • WebΞϓϦέʔγϣϯͷ੩తΞηοτͷϏϧυ πʔϧͰ͢ • JSͷτϥϯεύΠϧґଘղܾͪΖΜͰ͖ ·͢ • JS͚ͩͰͳ͘StyleImageͳͲͷϏϧυ͓Αͼ όϯυϧαϙʔτ͠·͢
࠶ར༻Մೳͳίϯϙʔωϯτ ͷཉ • τϥϯεύΠϧʹඞཁͳπʔϧͷόʔδϣϯཁٻͨ͘͠ͳ ͍(babelͷόʔδϣϯͱ͔) • ͱ͍͑༻͢ΔϥΠϒϥϦͷࡉ͔ͳόʔδϣϯ֤Ξϓ ϦέʔγϣϯͰཧ͍ͨ͠ • ݟͨἧ͍͑ͨ(styleఆؚٛΈ͍ͨ)
• ͱ͍͑ར༻ଆͰstyleͷඍௐ͍ͨ͠(styleͷଧͪফ͠ ্ॻ͖͕༰қͰ͋Δඞཁ͕͋Δ)
ͬ͘͟Γํ • τϥϯεύΠϧޙͷjsΛఏڙ͢Δ • ༻͢ΔϥΠϒϥϦexternalsʹࢦఆ͢Δ • css loaderΛ͍ɺstyleఆٛΛϩʔΧϧείʔ ϓͰ࣋ͨͤΔ
Webpackͷexternalsͷࢦఆ
Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTରͷจࣈྻ ᶄτϥϯεύΠϧޙͷจࣈྻ ᶅґଘղܾํ๏
ɾϏϧυલ ɾϏϧυޙ XFCQBDL Webpackͷexternalsͷࢦఆ
ɾϏϧυલ ɾϏϧυޙ XFCQBDLͰϏϧυ Webpackͷexternalsͷࢦఆ ᶃFYUFSOBMTରͷจࣈྻ ᶅґଘղܾํ๏ ᶄτϥϯεύΠϧޙͷจࣈྻ
externalsࢦఆͰಘΔͷ • ϥΠϒϥϦͷόʔδϣϯࢦఆར༻ଆʹدͤ ΒΕΔ • ϏϧυޙͷjsΛఏڙͯ͠αΠζ͕͑ΒΕΔ
css loaderͷར༻ IPHFSFBDUKT IPHFTDTT
css loaderͷར༻
css loaderʹΑͬͯಘΔͷ • styleίϯϙʔωϯτԽ͢Δ͜ͱͰʹؚΉ͜ͱͰɺݟͨͷ Β͖ͭΛ͑ΒΕΔ • ϩʔΧϧείʔϓηϨΫλ໊Λbase64ͰΤϯίʔυ͢Δ͜ͱ ʹΑ࣮ͬͯݱ͍ͯ͠ΔɻΫϥε໊͕มΘΔ͚ͩͰৄࡉ͕ߴ͘ͳ Δ͜ͱͳ͍ (Αͬͯ֎෦͔ΒͷελΠϧͷଧͪফ͠ɾ্ॻ͖͕༰қʹͰ͖Δ)
• ίϯϙʔωϯτ։ൃ࣌ʹηϨΫλͷিಥΛؾʹ͠ͳͯ͘ྑ͘ͳ Δ
ίϯϙʔωϯτͷߏͷن ൪֎ଆʹ֎෦͔Β͞ΕͨDMBTT/BNFͱɺϩʔΧϧείʔϓΛDMBTT/BNFʹ͢Δ ൪ίϯϙʔωϯτͷ໊ΛDMBTT/BNFʹ͢Δ ͦΕΑΓଆʹίϯϙʔωϯτͷ༰Λهड़͢Δ
نΛ࣋ͨͤΔ͜ͱͰɺ ֎෦͔ΒͷελΠϧͷ ଧͪফ্͠ॻ͖͕ ͘͢͠ͳΔ
نʹ͍ͭͯ ઈࢍࢼߦࡨޡதͰ͢ɻɻ ྑ͍ϓϥΫςΟε͝ଘͰ͠ ͨΒੋඇڭ͍͑ͯͩ͘͞ʂ
ΤϯδχΞઈࢍืूதʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ