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
React with Reduxによる大規模商用サービスの開発 / nodefest2016
Search
Naohiro Yoshida
November 14, 2016
Technology
50
35k
React with Reduxによる大規模商用サービスの開発 / nodefest2016
東京Node学園祭2016で話したブッキングテーブルのやつ
Naohiro Yoshida
November 14, 2016
Tweet
Share
More Decks by Naohiro Yoshida
See All by Naohiro Yoshida
Kotlin Annotation Processor Tools(kapt)
yoshidan
1
7.3k
Other Decks in Technology
See All in Technology
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
510
速くて安いWebサイトを作る
nishiharatsubasa
14
15k
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
670
Cloud Spanner 導入で実現した快適な開発と運用について
colopl
1
900
全文検索+セマンティックランカー+LLMの自然文検索サ−ビスで得られた知見
segavvy
2
130
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
150
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
880
Active Directory攻防
cryptopeg
PRO
7
4.5k
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
160
CDKのコードを書く環境を作りました with Amazon Q
nobuhitomorioka
1
110
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
3
1.9k
Goで作って学ぶWebSocket
ryuichi1208
3
2.3k
Featured
See All Featured
Side Projects
sachag
452
42k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Why Our Code Smells
bkeepers
PRO
336
57k
Navigating Team Friction
lara
183
15k
Fireside Chat
paigeccino
34
3.2k
Visualization
eitanlees
146
15k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
350
Scaling GitHub
holman
459
140k
Transcript
3FBDUXJUI3FEVYʹΑΔେن༻αʔϏεͷ։ൃ ౦ژ/PEFֶԂࡇ ݄ ٢ాঘ߂ ϦΫϧʔτςΫϊϩδʔζ ϦΫϧʔτϥΠϑελΠϧ
ϒοΩϯάςʔϒϧ IUUQTCPPLJOHUBCMFKQ ҿ৯ళͷ༧ʹಛԽͨ͠αʔϏε ݕࡧ݁Ռʹදࣔ͞Εͨళඞͣࠓ༧Ͱ͖Δ ڝ߹ΑΓܝࡌళฮ͕ѹతʹଟ͍ (౦ژ͚ͩͰ13000݅Ҏ্)
#SPXTFS 8&#൛ͷΞʔΩςΫνϟ Ұ෦ 4FSWFS #'' 4FSWFS #'' #SPXTFS TFTTJPOEBUB TFTTJPOEBUB
ྲྀೖ࣌4FSWFSଆͰ443 4FSWFS4JEF3FOEFSJOH ͦͷޙϒϥβͰ41" 4JOHMF1BHF"QQMJDBUJPO ͱͯ͠ಈ࡞ 6OJWFSTBM *TPNPSQIJD +4ͳ8&#ΞϓϦέʔγϣϯ "1* "1* "1*
ຊͷ༰ React with ReduxͰͷSPA + SSRͷ࡞Γํ" ·ͬͨͱ͜ΖͳͲΛڞ༗ 3FBDU3FEVYͱ
ࣦഊ͠ͳ͍ͨΊʹ͓͍֮͑ͯͯཉ͍͠બ 5SBOTJUJPO $PEF4QMJUUJOH 4FSWFS4JEF3FOEFSJOH
3FBDU3FEVYͱ
3FBDUͱ 3FBDU$PNQPOFOUΛΈ߹Θͤͯ࡞Δίϯϙʔωϯτࢤͷ'8 ࣮͢ΔͷԾ%0.ʹର͢ΔมߋͰɺ࣮%0.ͷߋ৽3FBDUͷதͰߦΘΕΔ $PNQPOFOU SFOEFS SFOEFS ϢʔβBDUJPO ʹΑΓมߋ ৽$PNQPOFOU5SFF ݱࡏͷ$PNQPOFOU5SFF
ࠩൺֱ )5.- ࠩө $PNQPOFOU JOQVUDMBTT/BNFl&SSPSz JOQVUDMBTT/BNFlz 3FBDU%0.$PNQPOFOU@IPTU/PEFTFU"UUSCVUF bDMBTT` `&SSPS`
3FEVYͱ 41"ͰTUBUFͷཧΛ༰қʹ͢ΔͨΊͷϑϨʔϜϫʔΫͰ3FBDU͡Όͳͯ͑͘Δ HMPCBMͳ୯ҰͷTUBUFΛTVCTDSJCFͯ͠มߋΛݕ͢Δ ํͷσʔλϑϩʔʹͳΔΑ͏ʹઃܭ͞Ε͍ͯΔ 3FBDUXJUI3FEVY 3FBDU TUPSF TUBUF 3FEVDFST "DUJPOT
EJTQBUDI QVCTVC QVCTVC TFU4UBUF TFU4UBUF TFU4UBUF
3FBDUXJUI3FEVY 3FBDU$PNQPOFOU͔ΒTUPSFΛTVCTDSJCF͢ΔʹSFBDUSFEVYͷDPOOFDUΛ͏ DPOOFDUͷୈҰҾ NBQ4UBUF5P1SPQT ͰTUBUFΛड͚औͬͯQSPQTʹม͢Δ 4UPSF 3FBDU $PNQPOFOU DPOOFDUΛͬͯ TVCTDSJCF
import { connect } from ‘react-redux'; export default compose( connect(state => ({ return state.searchAreaɹɹɹɹɹɹɹɹ }),bindActionCreators(Actions)) )(class AreaTopContainer extends DPOOFDUͷୈҰҾ NBQ4UBUF5P1SPQT Ͱ $PNQPOFOU͕ར༻͢ΔTUBUF֊Λࢦఆ͢Δ TUBUF\ BSFB5PQ\ʜ^ TFBSDI"SFB\ʜ^ SFTUBVSBOUT\ʜ^ ʜ ^
$PNQPOFOUT TUPSF 4PGUXBSF$PNQPOFOUT "1* "1* ɾɾɾ 4FSWJDFT "DUJPO $SFBUPST SFEVY
NJEEMFXBSF $POUBJOFS $PNQPOFOUT 1SFTFOUBUJPOBM $PNQPOFOUT SFBDU SPVUFS SFEVDFST EJTQBUDI XSBQQFE EJTQBUDI SBX DVSSFOU4UBUF MJTUFOFST SPVUFT TDTT 4FSWFS0OMZ 4FSWFSBOE$MJFOU ɾɾɾ ɾɾɾ ։ൃ͕ඞཁ SFBDUSFEVY͕ఏڙ DMJFOUͷ࣌ʹ SFEVYͷ)0$ͷ DPNQPOFOU%JE.PVOUͰ TUPSFͷMJTUFOFSTʹొ ᶃ ᶄ ᶅ ᶆ"DUJPOT \UZQF QBZMPBE^ ᶇ ᶈ9)3PSMPDBMDBMM ᶉOFYU ᶊ ᶋ ᶌ TFSWFSͷ࣌MJTUFOFSTʹొ͞Ε͍ͯͳ͍ ͷͰɺશBDUJPOͷEJTQBUDI͕ऴͬͨΒ 443͢ΔॲཧΛॻ͘ඞཁ͕͋Δ
3FBDU TUPSF TUBUFมߋ͔ΒSFOEFS·Ͱ TUPSFͷMJTUFOFSTʹݱࡏදࣔதDPOOFDUதͷ$PNQPOFOU͕ొ͞Ε͍ͯΔ EJTQBUDIຖʹશMJTUFOFSTʹରͯ͠NBQ4UBUF5P1SPQT·Ͱඞ࣮ͣߦ NBQ4UBUF5P1SPQTͷ݁ՌͱݱࡏͷQSPQTͰ͕ࠩ͋ΕSFOEFS ࠩҟͷൺֱTIBMMPX&RVBMTͳͷͰաSFOEFSSFOEFS͞Εͳ͍έʔεʹҙ $POUBJOFS$PNQPOFOUT SFEVDFST EJTQBUDI
SBX MJTUFOFST $POOFDU˞SFBDUSFEVY͕ఏڙ TIPVME $PNQPOFOU 6QEBUF IBOEMF $IBOHF DVSSFOU4UBUF VQEBUF 4UBUF1SPQT *G/FFEFE TFU4UBUF ᶃ ᶄ ᶅ ᶆ ᶇ ᶈ ᶆͷ݁Ռࠩҟ͕͋ΕUSVFʹͳΓ $PNQPOFOU͕SFOEFS͞ΕΔ NBQ4UBUF5P1SPQTͷ ࣮ߦ݁ՌͱݱࡏQSPQTͷൺֱ 3FBDU3FDPODJMFS NBQ4UBUF UP1SPQT ݱࡏͷTUBUFͱBDUJPOΛ ड͚औΓ৽TUBUFΛฦ͢ SFEVY NJEEMFXBSF ɾɾɾ ɾɾɾ ։ൃ͕ඞཁ SFBDUSFEVY͕ఏڙ
ࣦഊ͠ͳ͍ͨΊʹ͓͍֮͑ͯͯཉ͍͠બ
5SBOTJUJPO
ը໘ભҠ࣌ʹى͍ͬͯ͜Δ͜ͱ ݕࡧϘλϯ࣮ߦ 63-͕มΘΔ UPLZPMJTU -JOL QVTIͰભҠ 63-มߋ UPLZPMJTUͷ 3PVUFͷPO&OUFS
UPLZPMJTUͷ3PVUFͷ HFU$PNQPOFOU SPVUFSNJEEMFXBSF dSFOEFS ݱࡏͷը໘ DPNQPOFOU8JMM6ONPVOU ࣍ͷը໘ DPNQPOFOU8JMM.PVOU ࣍ͷը໘ SFOEFS ϓϩάϨεόʔग़͢ͳͲ UPLZPMJTU -0$"5*0/@$)"/(& "DUJPO͕EJTQBUDI ೝূೝՄνΣοΫͳͲΛ࣮ࢪ ඞཁʹԠͯ͡ϩάΠϯը໘ʹ ඈ͢ͳͲ εΫϩʔϧҐஔΛ ෮ݩͨ͠Γ͢Δ ࣍ͷը໘දࣔ UPLZPMJTU ࣍ͷը໘ DPNQPOFOU%JE.PVOU SPVUFSNJEEMFXBSF DPNQPOFOU%JE6QEBUF ੳϩάͷૹ৴ͳͲ 3PVUFS$POUFYU dSFOEFS ͜͜ͰTUBUFมߋՄ දࣔதͷDPNQPOFOUͷTUBUF มߋؾΛ͚ͭΔ ը໘ભҠ࣌ͷσʔλݕࡧ ׂͨ͠KBWBTDSJQUͷ EPOXMPBEͳͲ
PO&OUFSSFQMBDF4UBUFΛ͏ PO&OUFSͷλΠϛϯάͰ63-͕ΓସΘ͍ͬͯΔͨΊQVTIͩͱཤྺ͕Δ ݕࡧը໘ ϩάΠϯ ༧ೖྗ UPLZPMJTU SFTFSWBUJPO MPHJO SFTFSWBUJPO ݕࡧը໘
༧ೖྗ ݕࡧը໘ ϩάΠϯ ༧ೖྗ UPLZPMJTU SFTFSWBUJPO MPHJO SFTFSWBUJPO ݕࡧը໘ QVTI SFQMBDF PO&OUFSͰQVTIͨ͠߹ PO&OUFSͰSFQMBDFͨ͠߹ ը໘ભҠ ϒϥβόοΫ QPQ4UBUF ࠶PO&OUFS͕࣮ߦ͞ΕΔ 0QFO*%$POOFDUͳͲͰผυϝΠϯͷϩάΠϯը໘ʹભҠ͢Δ߹ҙ DMJFOUଆͰIJTUPSZ"1*ͷSFQMBDFͰͳ͘XJOEPXMPDBUJPOSFQMBDFΛ͏ TFSWFSଆͰϦμΠϨΫτΛ͏
SPVUFSNJEEMFXBSFͷEBUBGFUDIઓུ ࢀߟɿSFEVYBTZODMPBEFS SPVUFS NJEEMFXBSF $POUBJOFS $PNQPOFOU TUPSF 3PVUFS $POUFYU EJTQBUDI
FOEBDUJPO EJTQBUDI CFHJOBDUJPO EJTQBUDI EBUBGFUDI TIPVME$PNQPOFOU 6QEBUF 3FBDU3FDPODJMFS SFOEFS DPNQPOFOU 8JMM3FDFJWF1SPQT SFOEFSର$PNQPOFOU͔ΒEBUBGFUDIॲཧநग़ GBMTF USVF MPBEJOHUSVF MPBEJOHGBMTF SFOEFS SFOEFS GBMTF GBMTF શEBUBGFUDI͕ऴΔ·Ͱ3PVUFS$POUFYUͷSFOEFSΛͨͤΔ EBUBGFUDIͷ։࢝ɺऴྃ࣌ʹΠϕϯτ͕ൃߦ͓ͯ͘͠ͱ͍͍ EJTQBUDI EBUBGFUDI/
ը໘ભҠ࣌ͷσʔλݕࡧΛͲ͜ͰΔ͔ SPVUFSNJEEMFXBSF ϥΠϑαΠΫϧΠϕϯτ ը໘ભҠ QBUI͕มΘΔ߹ ˓ ˓ RVFSZTUSJOH͚͕ͩมΘΔ߹ ˓ ˓ɿDPNQPOFOU8JMM3FDFJWF1SPQT
ͳͲ RVFSZTUSJOHมΘΒͳ͍߹ ˓ ˚ɿը໘ભҠͱผͷBDUJPOͰ࣮͢ ΔͳͲͰରԠ EBUBGFUDIதͷϩʔσΟϯάදࣔ ˓ ˓ EBUBGFUDIதʹݩͷը໘ͷί ϯςϯπ͍ͨ͠߹ ˓ ºɿDPNQPOFOU͕ΓସΘΔ߹ɺ લը໘͕VONPVOU͞ΕͯΔͷͰਏ͍ લճද͍ࣔͯͨ࣌͠ͷݹ͍ใΛ ग़͞ͳ͍Α͏ʹ͢Δ ˓ ˚ɿݟ্੍ͨޚͰ͖ͯճͷ SFOEFS࣮ߦ ੳϩάૹ৴Ͱ՝ʣ 443 SFOEFSલͷTUBUFߏங ˓ɿSFBDUSPVUFSͰܾఆͨ͠ DPNQPOFOU͔Βൈ͍࣮ͯߦ ˓ɿSFBDUSPVUFSͰܾఆͨ͠ DPNQPOFOU͔Βൈ͍࣮ͯߦ 443ޙͷΫϥΠΞϯτଆͰͷ ࣮ߦ੍ޚ ˓ɿSPVUFSNJEEMFXBSFͰ443༗ແ ֬ೝ ˓ɿ$PNQPOFOUຖʹ443༗ແ֬ೝ 443தͷEJTQBUDIࢭ ˓ɿ443࣌SPVUFSNJEEMFXBSFະ ༻ ˓ɿ*OJUJBMEBUBGFUDI DPNQPOFOU%JE.PVOUͰ࣮͢ΔͳͲ ੜ࢈ੑ OPEF@NPEVMFTͷ༗ແ ˓ ʁ උߟ ը໘ભҠͷ͚࣮࣌ͩߦ ը໘ભҠҎ֎ͷ ༷ʑͳλΠϛϯάͰ࣮ߦ͞ΕΔ
J1IPOFͷը໘εϫΠϓͰͷΔਐΉ J1IPOFͰը໘εϫΠϓͯ͠ΔͱҰॠΔલͷը໘͕ͪΒͭ͘͜ͱ͕͋Δ QPQ4UBUF࣌ʹ3PVUFS$POUFYUͷSFOEFSΛࢭΊ͍ͯΔͱൃੜ ը໘εϫΠϓͨ͠ॠؒ·ͩΓݩͷը໘͕VONPVOU͞Ε͍ͯͳ͍ͨΊ ͬͨॠؒ ॠళฮৄࡉ͕දࣔ εϫΠϓͰτοϓը໘ ళฮը໘දࣔத τοϓදࣔ ˞ը໘εϫΠϓ͡Όͳͯ͘௨ৗͷϒϥβόοΫͰൃੜ͠ͳ͍
ճආࡦ QVTI࣌ʹEBUBGFUDIͨ݁͠ՌΛϒϥβʹΩϟογϡ͓ͯ͘͠ QPQ࣌ͷEBUBGFUDIΩϟογϡΛͬͯͬ͞͞ͱVONPVOU·Ͱ࣋ͬͯ͘
5SBOTJUJPOཁ Ͳ͔͜Λ͢ͱͲ͔͕͜ಈ͔ͳ͘ͳΔɺ͕ى͜Γ͍͢ ಛʹSFEVYHMPCBMTUBUFͰݹ͍ใ͕͍ͬͯΔͷͰҙ εϚϗґଘͷڍಈෆ৹͕݁ߏ͋ΔͷͰ࠷ॳ͔Β࣮ػ֬ೝΛ
$PEF4QMJUUJOH
.POPMJUIJD+BWB4DSJQU XFCQBDLͰϏϧυ͢Δ࣌ʹϧʔςΟϯά͔ΒҶͮΔࣜʹશNPEVMFࢀর ϒοΩϯάςʔϒϧͩͱNJOJGZޙͰ.#͘Β͍ SPVUFT KT $PVQPOKT "SFB5PQKT ɾɾɾ NBJO \IBTI^KT
FOUSZ PVUQVU JNQPSU DMJFOU KT SFBDURS -B[Z-PBEKT ɾɾɾ
ࢦ͢ܗ .POPMJUIJD +BWBTDSJQU NBJOKT SEQBSUZ WFOEPSKT BQQDPNNPO NBJOKT XFCQBDL+TPOQ DIVOLNBOJGFTUKT
BQQ BQQKT BQQ/ BQQ/KT #FGPSF "GUFS มߋՕॴҎ֎KTͷIBTIΛม͑ͣʹϒϥβΩϟογϡΛ࠷େݶ׆༻ มߋ ස ଟ গ ϑΝΠϧ αΠζ খ େ
4UFQ .POPMJUIJD +BWBTDSJQU NBJOKT XFCQBDL+TPOQ DIVOLNBOJGFTUKT BQQ BQQKT BQQ/ BQQ/KT
#FGPSF "GUFS ·ͣը໘͝ͱͷKTΛׂ͢Δ BQQDPNNPO SEQBSUZ NBJOKT
ը໘ຖͷ+4ׂ <Route path=“pathname” getComponent={(_,cb)=>{ require.ensure([], function (require) { cb(null, require(‘Componentͷύε’).default);
},’jsͷϑΝΠϧ໊’); }} /> SFBDUSPVUFSͱXFCQBDLͷSFRVJSFFOTVSFΛΈ߹Θ࣮ͤͯݱՄೳ SFRVJSFFOTVSFΛίʔυʹهࡌͯ͠Ϗϧυ͢ΔͱKTׂ͕͞ΕΔ 3PVUFͷHFU$PNQPOFOUͰهࡌ͢Δ͜ͱͰը໘ຖʹׂՄ <Route path=“pathname” component={Component} /> #FGPSF "GUFS plugins: [ new CommonsChunkPlugin(‘chunkmanifest’, 'chunkmanifest-[chunkhash].js', 2), ], ϧʔςΟϯάఆٛ ׂͨ͠KTͷಈతϩʔυͷઃఆ
ը໘ભҠ࣌ͷ+4μϯϩʔυ ׂͨ͠+4Λ443࣌ʹग़ྗ͢ΔIUNMͷTDSJQUʹ ؚΊΔͱɺ443ޙʹμϯϩʔυ͢Δ ؚΊͳ͍ͱɺը໘ભҠ࣌ʹμϯϩʔυ͢Δ Ϣʔβ ૢ࡞ #SPXTFS 4FSWFS DIVOLNBOJGFTUʜKTऔಘ #ʜKTऔಘ
"ʜKTऔಘ #ը໘ʹભҠ HFU$PNQPOFOU࣌ 4FSWFS4JEF3FOEFSJOH "ը໘ʹྲྀೖ NBJOʜKTऔಘ IUNM TDSJQUTSDDIVOLNBOJGFTUʜKT TDSJQUTSDNBJOʜKT TDSJQTSD"ʜKT
4DSJQU-PBE&SSPS <Route path=“pathname" getComponent={(_,cb)=>{ require.ensure([], function (require) { cb(null, require(‘Componentͷύε’).default);
}, function () { // reload if script loading failed window.location.reload(); }, ’jsͷϑΝΠϧ໊’); }}> </Route> ૉͷXFCQBDLYܥͩͱSFRVJSFFOTVSFͷTDSJQUMPBEFSSPSΛर͑ͳ͍ ͜ͷ࣌SFRVJSFFOTVSFͷDBMMCBDL͕࣮ߦ͞Εͳ͍ͷͰը໘ભҠͤͣʹఀࢭ SFRVJSFFOTVSFFSSPSIBOEMFSΛͬͯΤϥʔϋϯυϦϯάՄೳ
݁Ռ .POPMJUIJD +BWBTDSJQU NBJOKT BQQDPNNPO SEQBSUZ NBJOKT BQQ BQQKT BQQ/
BQQ/KT #FGPSF "GUFS XFCQBDL+TPOQ DIVOLNBOJGFTUKT ΓSEQBSUZͱΞϓϦέʔγϣϯͷڞ௨NPEVMFͷׂ
XFQBDLͷFOUSZʹKTͷΤϯτϦϙΠϯτΛͦΕͧΕॻ͘ entry: { main: [‘./src/client/' + device + ‘/client.js’], vendor:
[‘react’,’redux’,’react-router’,’fetchr’,… ] } plugins: [ … new OccurrenceOrderPlugin(true), new CommonsChunkPlugin('vendor', ‘vendor-[chunkhash].js', 2), new CommonsChunkPlugin(‘chunkmanifest','chunkmanifest-[chunkhash].js', 2), … ], SEQBSUZͷׂ SFBDU ɾɾɾ DMJFOUKT SPVUFTKT WFOEPS \IBTI^KT NBJO \IBTI^KT
XFCQBDLͰNPEVMFҰͭҰͭʹJOEFY͕ৼΒΕΔ NPEVMF͕Ұͭ૿͑ΔͱશମͷJOEFY͕มΘΔͨΊશKTͷIBTI͕มΘΓ͏Δ ! ! ! ! ! ! ! !
0DDVSFODF0SEFS1MVHJO USVF Λ͏ͱɺFOUSZʹهࡌͷKT͕͏NPEVMFΛ༏ઌ ͨͩ͠FOUSZʹهࡌͨ͠KT͕͏NPEVMF͕૿͑ͨΒɺશIBTI͕มΘΓ͏Δ ྫ͑NBJOͰ͏NPEVMFՃͨ͠ΒWFOEPSมΘΔ Ϟδϡʔϧ*%ͷ JOEFY NPEVMF SFBDU SFEVY GFUDIS IJTUPSZ WFOEPSKT WFOEPSKT JOEFY NPEVMF SFBDU SFEVY GFUDIS IJTUPSZ BSFB5PQKTʹ NPEVMFՃ
8FCQBDL$PNQJMBUJPO XFCQBDLͰ$PNQJMF࣌ʹɺϑΣʔζʹରԠͨ͠ϓϥάΠϯΛ࣮ߦ͍ͯ͠Δ BQQMZ.PEVMFTͰNPEVMFͷ*%͕ܾ·ΓBQQMZ$IVOL*ETͰKTͷ*%͕ܾ·Δ BQQMZ.PEVMF*ETͷલʹNPEVMFΛιʔτ͢ΔϓϥάΠϯΛ࡞੍ͬͯޚՄೳ $PNQJMBUJPO MJCXFCQBDLKT 5BQBCMF ʜ PQUJNJ[FNPEVMFPSEFS CFGPSFNPEVMFJET
BQQMZ.PEVMF*ET ʜ PQUJNJ[FNPEVMFPSEFS CFGPSFNPEVMFJET BQQMZ$IVOL*ET 0DDVSSFODF 0SEFS1MVHJO TPSU NPEVMFT TPSU DIVOLT
ࢀߟɿQMVHJOΛࣗ࡞ͯ͠ΈΔ function OptimizeModulerOrderPlugin(entryPriority) { this.entryPriority = entryPriority; }
OptimizeModulerOrderPlugin.prototype.apply = function(compiler) { var ep = this.entryPriority; compiler.plugin("compilation", function(compilation) { compilation.plugin("optimize-module-order", function(modules) { modules.sort(function(a, b) { var achunk = a.chunks.length === 1 ? a.chunks[0].name : null; var bchunk = b.chunks.length === 1 ? b.chunks[0].name : null; if(!achunk && !bchunk) return 0; for(var i = 0; i < ep.length; i++){ if(achunk === ep[i] && bchunk !== ep[i]) return -1; if(bchunk === ep[i] && achunk !== ep[i]) return 1; if(achunk === ep[i] && bchunk === ep[i]){ if (a.identifier() > b.identifier()) return 1; if (a.identifier() < b.identifier()) return -1; if (a.identifier() === b.identifier()) { if(a.index > b.index) return 1; if(a.index < b.index) return -1; return 0; } } } return 0; }); ҾͷDIVOLͷఆٛॱʹैͬͯNPEVMF*Eͷ༏ઌΛܾఆ͢Δ TDPEFॴଐͷNPEVMF͕࠷༏ઌɺ͕࣍WFOEPSɺ࠷ޙ͕NBJO new OptimizeModuleOrderPlugin([‘scode’,’vendor’,’main’])
݁Ռ .POPMJUIJD +BWBTDSJQU NBJOKT SEQBSUZ WFOEPSKT BQQDPNNPO NBJOKT XFCQBDL+TPOQ DIVOLNBOJGFTUKT
BQQ BQQKT BQQ/ BQQ/KT #FGPSF "GUFS มߋ ස ଟ গ ϑΝΠϧ αΠζ খ େ
4FSWFS4JEF3FOEFSJOH
443dΫϥΠΞϯτͰͷSFOEFS·Ͱ 4FSWFS "1* #SPXTFS ᶇ3FBDU%0.SFOEFS 443ͱಉ͡Α͏ʹ)5.-࡞ͯ͠DIFDLTVNൺֱ ϥΠϑαΠΫϧϝιουͳͲ࣮ߦ TUBUF
DPOUFOUT ᶄ%BUB'FUDI ᶅ3FBDU%0.4FSWFSSFOEFS5P4USJOH ᶆ)5.-ฦ٫ DPOUFOUT $PNQPOFOU ʴ TUBUF ᶃIUUQTCPPLJOHUBCMFKQ DPOUFOUT DMJFOU $PNQPOFOU ʴ TUBUF DPOUFOUT TFSWFS TFSWFSͰTUBUFͱDPOUFOUTͰߏ͞ΕΔ)5.-จࣈྻΛ࡞ͯ͠ฦ٫ ΫϥΠΞϯτͰಉ͡Α͏ʹIUNM࡞ͯ͠443݁Ռͱൺֱ ࠩҟ͕͋ΕΫϥΠΞϯτͷ݁ՌͰ%0.Λ্ॻ͖͢Δ 443ͷ༗ແʹݶΒͣΫϥΠΞϯτଆͰͷSFOEFSඞ࣮ͣߦ͢Δඞཁ͕͋Δ
1FSGPSNBODF RPS : 17.02 ϨεϙϯελΠϜฏۉ:578 msec RenderToStringͷ࣌ؒ: 60 ~ 80
msec 2,893 Component ˞BCODͰܭଌͨ݁͠Ռ ˞.BD#PPL1SP ()[*OUFM$PSFJ /PEFW ˞"1*ίʔϧআ͍ͨ݁Ռ
3FBDU 3FDPODJMFS ࢀߟɿ3FBDU%0.4FSWFSSFOEFS5P4USJOH NPVOU $PNQPOFOU 3FBDU%0.$PNQPOFOU NPVOU $PNQPOFOU 3FBDU$PNQPTJUF$PNQPOFOU NPVOU
$PNQPOFOU 3FBDU.VMUJ$IJME NPVOU $IJMESFO 3FBDU 4FSWFS3FOEFSJOH SFOEFS5P4USJOH *NQM 3FBDU$PNQPOFOU $PNQPOFOU 8JMM.PVOU SFOEFS݁Ռͷ3FBDU&MFNFOU͔Β $PNQPOFOUΛੜͯ͢͠ TQBOBͳͲͬͪ͜ ࢠ3FBDU&MFNFOU͕͋Δ߹ 3FBDU&MFNFOU͔Β $PNQPOFOUΛੜͯ͠ ͢ºࢠͷ SFOEFS5P4USJOH 1SPWJEFSTUPSF\TUPSF^ 3PVUFS$POUFYU\ʜQSPQT^ 1SPWJEFS BQQMJDBUJPO 3FBDU .BSLVQ$IFDLTVN BEE$IFDLTVN 5P.BLFVQ Ͱ͖͕͋ͬͨIUNMͷ EBUBSFBDUDIFDLTVNଐੑʹ νΣοΫαϜՃ 1SPWJFS͔Β 3FBDU$PNQPTJUF$PNQPOFOU Λ࡞ͯ͢͠ $PNQPOFOU͔ΒSFBDUEBUBJEΛؚΜͩIUNMจࣈྻੜ ࢠཁૉͷͳ͍TQBOBͳͲʙNJDSPTFD ୯ҰͷTQBOΛࢠʹ࣋ͭBʙNJDSPTFD ࣗ࡞ͷ$PNQPOFOU -JOLdNJDSPTFD BΛϥοϓʙNJDSPTFD 3FBDU$PNQPOFOUͷΠϯελϯεΛੜ͠ͳ͕Β࠶ؼతʹIUNMจࣈྻΛੜ Ͱ͖͕͋ͬͨIUNMʹνΣοΫαϜΛ༩ SFOEFS 3FBDU$PNQPOFOU͕ϥοϓ͞Εͨͷ
4PMVUJPO ϒοΩϯάςʔϒϧͰҎԼͷରԠΛ࣮ࢪ 1BSUJBM3FOEFSJOH 443$BDIF $PNQPTJUF3FOEFSJOH
1BSUJBM3FOEFSJOH Ϣʔβ͕εΫϩʔϧͤͣʹݟ͑Δൣғ 'JSTU7JFX ͷΈ443 εΫϩʔϧ͠ͳ͍ͱݟ͑ͳ͍ͱ͜ΖΫϥΠΞϯτଆͰSFOEFS $POUFOUT WJTJCMFPOQBHFMPBE pSTUWJFX $POUFOUT VTFSTDSPMMTUPCSPXTF
$POUFOUT VTFSSBSFMZCSPXTF QBHF 3FOEFS BU 4FSWFS 3FOEFS BU $MJFOU
1BSUJBM3FOEFSJOH 4FSWFS "1* #SPXTFS ᶄ%BUB'FUDI ᶆ)5.-ฦ٫ ᶃIUUQTCPPLJOHUBCMFKQ ϒοΩϯάςʔϒϧͰ-B[Z-PBEͰͳ͘-B[Z3FOEFSΛߦ͏ 443ͱ13ͷΓସ͑Λ༻ҙʹ͢ΔͨΊ ᶅ3FBDU%0.4FSWFSSFOEFS5P4USJOH
SFOEFS3FBEZGBMTFʹ͢Δ εΫϩʔϧ෦SFOEFS3FBEZUSVF ͡Όͳ͍ͱSFOEFS͞Εͳ͍Α͏ʹ࣮͓ͯ͘͠ pSTUWJFX pSTUWJFX ᶇ3FBDU%0.SFOEFS ᶈ3FBDU%0.SFOEFSͷίʔϧό οΫͰSFOEFS3FBEZUSVFʹ ͢ΔBDUJPOΛEJTQBUDI pSTUWJFX QBHF QBHF
1BSUJBM3FOEFSJOH RPS : 17.02 -> 62.64 ϨεϙϯελΠϜฏۉ:578 -> 150 msec
RenderToStringͷ࣌ؒ: 60 ~ 80 -> 10 ~ 20 msec 2,893 -> 359 Component
b'FUDIBT(PPHMF`ͷ݁Ռ 1BSUJBM3FOEFSJOHͰεΫϩʔϧҎԼؚΊશίϯςϯπೝࣝ ˞'JSTU7JFX͕ͳ͍௨ৗͷ41"Ͱ$43ޙͷίϯςϯπ͕ೝࣝ
b1BHF4QFFE*OTJHIU`ͷ݁Ռ ී௨ͷ41" $MJFOU4JEF3FOEFSJOH 1BSUJBM3FOEFSJOH 1BSUJBM3FOEFSJOH443ͱಉ͡ɺͨͩ͠$43ݮ
443$BDIF 443࣌ʹSFOEFS݁ՌΛҰఆظؒΩϟογϡͯ͠࠶ར༻͢Δ Ϣʔβґଘ෦ΫϥΠΞϯτଆͰSFOEFS $POUFOUT WJTJCMFPOQBHFMPBE pSTUWJFX QBHF $POUFOUT VTFSTDSPMMTUPCSPXTF $POUFOUT
VTFSSBSFMZCSPXTF VTFS DPOUFOUT VTFS DPOUFOUT VTFS DPOUFOUT 3FOEFS BU $MJFOU $BDIF PS 3FOEFS BU 4FSWFS
443$BDIF 1BSUJBM3FOEFSJOHͱಉ༷ʹ-B[Z3FOEFS 4FSWFS "1* #SPXTFS ᶃIUUQTCPPLJOHUBCMFKQ ᶄ%BUB'FUDI -36 $BDIF ᶅ3FBDU%0.4FSWFSSFOEFS5P4USJOH
PSΩϟογϡ͔Βऔಘ QBHF ᶆ)5.-ฦ٫ QBHF QBHF ᶇ3FBDU%0.SFOEFS ᶈ3FBDU%0.SFOEFSͷίʔϧό οΫͰVTFS3FOEFS3FBEZ USVFʹ͢ΔBDUJPOΛEJTQBUDI VTFS3FOEFS3FBEZGBMTFʹ͢Δ ϢʔβใSFOEFS3FBEZUSVF ͡Όͳ͍ͱSFOEFS͞Εͳ͍Α͏ʹ࣮͓ͯ͘͠
ࢀߟɿ$PNQPTJUF3FOEFSJOH Ұఆ࣌ؒͷϦΫΤετʹԠͯ͡ಈతʹ3FOEFSJOHํࣜΛΓସ͑Δํࣜ ௨ৗ࣌SFOEFS3FBEZUSVFʹ͓͖ͯ͠ߴෛՙ࣌GBMTFʹ͢ΔͳͲ ॠؒ෩ ը໘ಛੑ ϨϯμϦϯάํࣜ খ 4FSWFS4JEF3FOEFSJOH த
ߴΩϟογϡώοτ 443$BDIF த Ωϟογϡώοτ 1BSUJBM3FOEFSJOH ߴ $MJFOU4JEF3FOEFSJOH
4VNNBSZ ϨϯμϦϯά ํࣜ /PEFෛՙ ద༻қ 69 4&0 උߟ $43 41"
˕ ˕ º º 443 $BDIF ˕ ˚ Ϣʔβґଘ͔൱͔ ͷ੍ޚɺUUMͷܾఆ ˚ Ϣʔβใ͕ 'JSTU7JFXʹ͋ Δ߹ͷ੍ޚ ˕ ߴΩϟογϡ ώοτ͕ߴ͍ Ϣʔβґଘใ͕ গͳ͍͜ͱ 1BSUJBM 3FOEFSJOH ˓ ˓ 'JSTU7JFX͔ ൱͔ͷ੍ޚ ˕ ˓ +4ରԠ͍ͯ͠ͳ͍ ΫϩʔϥΛߟྀ͢ Δ͔ 443 ˚ ˕ ˕ ˕
·ͱΊ 5SBOTJUJPO ࣮લʹ։ൃऀશһ͕͔͓͖ͬͯ͘ PO&OUFSEBUBGFUDIHMPCBMTUBUFͷΓʹؾΛ͚ͭΔ $PEF4QMJUUJOH XFCQBDLͱSFBDUSPVUFSΛΈ߹Θ࣮ͤͯݱՄೳ NPEVMF*Eͷॱ൪ʹؾΛ͚ͭΔ 4FSWFS4JEF3FOEFSJOH λʔϯΞϥϯυλΠϜతʹΒͳ͍ํ͕ૣ͍ Ωϟογϡ1BSUJBM3FOEFSJOHݕ౼
ෆཁͳ443͕࣮ߦ͞Εͳ͍Α͏IJTUPSZ"1*Ͱͷը໘ભҠΛجຊʹ ͦͷଞ ฐࣾϒϩάͰใൃ৴ IUUQFOHJOFFSSFDSVJUMJGFTUZMFDPKQUFDICMPH IUUQTSFDSVJUUFDIDPKQCMPH