React with Reduxによる大規模商用サービスの開発 / nodefest2016

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&OUFS͸SFQMBDF4UBUFΛ࢖͏ 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ཁ఺ Ͳ͔͜Λ௚͢ͱͲ͔͕͜ಈ͔ͳ͘ͳΔɺ͕ى͜Γ΍͍͢ ಛʹSFEVY͸HMPCBMTUBUFͰݹ͍৘ใ͕࢒͍ͬͯΔͷͰ஫ҙ εϚϗ͸୺຤ґଘͷڍಈෆ৹͕݁ߏ͋ΔͷͰ࠷ॳ͔Β࣮ػ֬ೝΛ

$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Λੜ੒ͯ͠౉͢ TQBO΍BͳͲ͸ͬͪ͜ ࢠ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จࣈྻੜ੒ ࢠཁૉͷͳ͍TQBO΍BͳͲʙ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 1BSUJBM3FOEFSJOH͸443ͱಉ͡఺਺ɺͨͩ͠$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

React with Reduxによる大規模商用サービスの開発 / nodefest2016

React with Reduxによる大規模商用サービスの開発 / nodefest2016

More Decks by Naohiro Yoshida

Other Decks in Technology

Featured

Transcript