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

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

東京Node学園祭2016で話したブッキングテーブルのやつ

4b521e2af229c69fa0f20b29b14c3edc?s=128

Naohiro Yoshida

November 14, 2016
Tweet

Transcript

  1. 3FBDUXJUI3FEVYʹΑΔେن໛঎༻αʔϏεͷ։ൃ ౦ژ/PEFֶԂࡇ ೥݄೔ ٢ాঘ߂ ϦΫϧʔτςΫϊϩδʔζ ϦΫϧʔτϥΠϑελΠϧ

  2. ϒοΩϯάςʔϒϧ IUUQTCPPLJOHUBCMFKQ ҿ৯ళͷ༧໿ʹಛԽͨ͠αʔϏε ݕࡧ݁Ռʹදࣔ͞Εͨళ͸ඞͣࠓ༧໿Ͱ͖Δ ڝ߹ΑΓ΋ܝࡌళฮ਺͕ѹ౗తʹଟ͍
 (౦ژ͚ͩͰ13000݅Ҏ্)

  3. #SPXTFS 8&#൛ͷΞʔΩςΫνϟ Ұ෦ 4FSWFS #'' 4FSWFS #'' #SPXTFS TFTTJPOEBUB TFTTJPOEBUB

    ྲྀೖ࣌͸4FSWFSଆͰ443 4FSWFS4JEF3FOEFSJOH  ͦͷޙϒϥ΢βͰ͸41" 4JOHMF1BHF"QQMJDBUJPO ͱͯ͠ಈ࡞ 6OJWFSTBM *TPNPSQIJD +4ͳ8&#ΞϓϦέʔγϣϯ "1* "1* "1*
  4. ຊ೔ͷ಺༰ React with ReduxͰͷSPA + SSRͷ࡞Γํ΍" ͸·ͬͨͱ͜ΖͳͲΛڞ༗  3FBDU3FEVYͱ͸ 

    ࣦഊ͠ͳ͍ͨΊʹ͓͍֮͑ͯͯཉ͍͠બ  5SBOTJUJPO  $PEF4QMJUUJOH  4FSWFS4JEF3FOEFSJOH
  5. 3FBDU3FEVYͱ͸

  6. 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`
  7. 3FEVYͱ͸ 41"ͰTUBUFͷ؅ཧΛ༰қʹ͢ΔͨΊͷϑϨʔϜϫʔΫͰ3FBDU͡Όͳͯ͘΋࢖͑Δ HMPCBMͳ୯ҰͷTUBUFΛTVCTDSJCFͯ͠มߋΛݕ஌͢Δ ํ޲ͷσʔλϑϩʔʹͳΔΑ͏ʹઃܭ͞Ε͍ͯΔ 3FBDUXJUI3FEVY 3FBDU TUPSF TUBUF 3FEVDFST "DUJPOT

    EJTQBUDI QVCTVC QVCTVC TFU4UBUF TFU4UBUF TFU4UBUF
  8. 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\ʜ^  ʜ ^
  9. $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͢ΔॲཧΛॻ͘ඞཁ͕͋Δ
  10. 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͕ఏڙ
  11. ࣦഊ͠ͳ͍ͨΊʹ͓͍֮͑ͯͯཉ͍͠બ

  12. 5SBOTJUJPO

  13. ը໘ભҠ࣌ʹى͍ͬͯ͜Δ͜ͱ ݕࡧϘλϯ࣮ߦ  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ͳͲ
  14. 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ଆͰ͸ϦμΠϨΫτΛ࢖͏
  15. 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/
  16. ը໘ભҠ࣌ͷσʔλݕࡧΛͲ͜Ͱ΍Δ͔ 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ͷ༗ແ ˓ ʁ උߟ ը໘ભҠͷ͚࣮࣌ͩߦ ը໘ભҠҎ֎ͷ
 ༷ʑͳλΠϛϯάͰ࣮ߦ͞ΕΔ
  17. J1IPOFͷը໘εϫΠϓͰͷ໭ΔਐΉ J1IPOFͰը໘εϫΠϓͯ͠໭ΔͱҰॠ໭Δલͷը໘͕ͪΒͭ͘͜ͱ͕͋Δ QPQ4UBUF࣌ʹ3PVUFS$POUFYUͷSFOEFSΛࢭΊ͍ͯΔͱൃੜ ը໘εϫΠϓͨ͠ॠؒ·ͩ໭Γݩͷը໘͕VONPVOU͞Ε͍ͯͳ͍ͨΊ ໭ͬͨॠؒ͸ ॠళฮৄࡉ͕දࣔ εϫΠϓͰτοϓը໘΁ ళฮը໘දࣔத τοϓදࣔ ˞ը໘εϫΠϓ͡Όͳͯ͘௨ৗͷϒϥ΢βόοΫͰ͸ൃੜ͠ͳ͍

    ճආࡦ QVTI࣌ʹEBUBGFUDIͨ݁͠ՌΛϒϥ΢βʹΩϟογϡ͓ͯ͘͠ QPQ࣌ͷEBUBGFUDI͸ΩϟογϡΛ࢖ͬͯͬ͞͞ͱVONPVOU·Ͱ࣋ͬͯ͘
  18. 5SBOTJUJPOཁ఺ Ͳ͔͜Λ௚͢ͱͲ͔͕͜ಈ͔ͳ͘ͳΔɺ͕ى͜Γ΍͍͢ ಛʹSFEVY͸HMPCBMTUBUFͰݹ͍৘ใ͕࢒͍ͬͯΔͷͰ஫ҙ εϚϗ͸୺຤ґଘͷڍಈෆ৹͕݁ߏ͋ΔͷͰ࠷ॳ͔Β࣮ػ֬ೝΛ

  19. $PEF4QMJUUJOH

  20. .POPMJUIJD+BWB4DSJQU XFCQBDLͰϏϧυ͢Δ࣌ʹϧʔςΟϯά͔ΒҶͮΔࣜʹશNPEVMFࢀর ϒοΩϯάςʔϒϧͩͱNJOJGZޙͰ.#͘Β͍ SPVUFT KT $PVQPOKT "SFB5PQKT ɾɾɾ NBJO \IBTI^KT

    FOUSZ PVUQVU JNQPSU DMJFOU KT SFBDURS -B[Z-PBEKT ɾɾɾ
  21. ໨ࢦ͢ܗ .POPMJUIJD +BWBTDSJQU NBJOKT SEQBSUZ WFOEPSKT BQQDPNNPO NBJOKT XFCQBDL+TPOQ DIVOLNBOJGFTUKT

    BQQ BQQKT BQQ/ BQQ/KT #FGPSF "GUFS มߋՕॴҎ֎KTͷIBTIΛม͑ͣʹϒϥ΢βΩϟογϡΛ࠷େݶ׆༻ มߋ
 ස౓ ଟ গ ϑΝΠϧ
 αΠζ খ େ
  22. 4UFQ .POPMJUIJD +BWBTDSJQU NBJOKT XFCQBDL+TPOQ DIVOLNBOJGFTUKT BQQ BQQKT BQQ/ BQQ/KT

    #FGPSF "GUFS ·ͣը໘͝ͱͷKTΛ෼ׂ͢Δ BQQDPNNPO SEQBSUZ NBJOKT
  23. ը໘ຖͷ+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ͷಈతϩʔυͷઃఆ
  24. ը໘ભҠ࣌ͷ+4μ΢ϯϩʔυ ෼ׂͨ͠+4Λ443࣌ʹग़ྗ͢ΔIUNMͷTDSJQUʹ ؚΊΔͱɺ443௚ޙʹμ΢ϯϩʔυ͢Δ ؚΊͳ͍ͱɺը໘ભҠ࣌ʹμ΢ϯϩʔυ͢Δ Ϣʔβ ૢ࡞ #SPXTFS 4FSWFS DIVOLNBOJGFTUʜKTऔಘ #ʜKTऔಘ

    "ʜKTऔಘ #ը໘ʹભҠ HFU$PNQPOFOU࣌ 4FSWFS4JEF3FOEFSJOH "ը໘ʹྲྀೖ NBJOʜKTऔಘ IUNM TDSJQUTSDDIVOLNBOJGFTUʜKT TDSJQUTSDNBJOʜKT TDSJQTSD"ʜKT
  25. 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Λ࢖ͬͯΤϥʔϋϯυϦϯάՄೳ
  26. ݁Ռ .POPMJUIJD +BWBTDSJQU NBJOKT BQQDPNNPO SEQBSUZ NBJOKT BQQ BQQKT BQQ/

    BQQ/KT #FGPSF "GUFS XFCQBDL+TPOQ DIVOLNBOJGFTUKT ࢒Γ͸SEQBSUZͱΞϓϦέʔγϣϯͷڞ௨NPEVMFͷ෼ׂ
  27. 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
  28. 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௥Ճ
  29. 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
  30. ࢀߟɿ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’])
  31. ݁Ռ .POPMJUIJD +BWBTDSJQU NBJOKT SEQBSUZ WFOEPSKT BQQDPNNPO NBJOKT XFCQBDL+TPOQ DIVOLNBOJGFTUKT

    BQQ BQQKT BQQ/ BQQ/KT #FGPSF "GUFS มߋ
 ස౓ ଟ গ ϑΝΠϧ
 αΠζ খ େ
  32. 4FSWFS4JEF3FOEFSJOH

  33. 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͸ඞ࣮ͣߦ͢Δඞཁ͕͋Δ
  34. 1FSGPSNBODF RPS : 17.02 ϨεϙϯελΠϜฏۉ:578 msec RenderToStringͷ࣌ؒ: 60 ~ 80

    msec 2,893 Component ˞BCODͰܭଌͨ݁͠Ռ ˞.BD#PPL1SP ()[*OUFM$PSFJ /PEFW ˞"1*ίʔϧ͸আ͍ͨ݁Ռ
  35. 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͕ϥοϓ͞Εͨ΋ͷ
  36. 4PMVUJPO ϒοΩϯάςʔϒϧͰ͸ҎԼͷରԠΛ࣮ࢪ 1BSUJBM3FOEFSJOH 443$BDIF $PNQPTJUF3FOEFSJOH

  37. 1BSUJBM3FOEFSJOH Ϣʔβ͕εΫϩʔϧͤͣʹݟ͑Δൣғ 'JSTU7JFX ͷΈ443 εΫϩʔϧ͠ͳ͍ͱݟ͑ͳ͍ͱ͜Ζ͸ΫϥΠΞϯτଆͰSFOEFS $POUFOUT WJTJCMFPOQBHFMPBE pSTUWJFX $POUFOUT VTFSTDSPMMTUPCSPXTF

    $POUFOUT VTFSSBSFMZCSPXTF QBHF 3FOEFS BU 4FSWFS 3FOEFS BU $MJFOU
  38. 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
  39. 1BSUJBM3FOEFSJOH RPS : 17.02 -> 62.64 ϨεϙϯελΠϜฏۉ:578 -> 150 msec

    RenderToStringͷ࣌ؒ: 60 ~ 80 -> 10 ~ 20 msec 2,893 -> 359 Component
  40. b'FUDIBT(PPHMF`ͷ݁Ռ 1BSUJBM3FOEFSJOHͰ΋εΫϩʔϧҎԼؚΊશίϯςϯπೝࣝ
 ˞'JSTU7JFX͕ͳ͍௨ৗͷ41"Ͱ΋$43ޙͷίϯςϯπ͕ೝࣝ

  41. b1BHF4QFFE*OTJHIU`ͷ݁Ռ ී௨ͷ41"
 $MJFOU4JEF3FOEFSJOH 1BSUJBM3FOEFSJOH 1BSUJBM3FOEFSJOH͸443ͱಉ͡఺਺ɺͨͩ͠$43͸ݮ఺

  42. 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
  43. 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͞Εͳ͍Α͏ʹ࣮૷͓ͯ͘͠
  44. ࢀߟɿ$PNQPTJUF3FOEFSJOH Ұఆ࣌ؒ಺ͷϦΫΤετ਺ʹԠͯ͡ಈతʹ3FOEFSJOHํࣜΛ੾Γସ͑Δํࣜ ௨ৗ࣌͸SFOEFS3FBEZUSVFʹ͓͖ͯ͠ߴෛՙ࣌͸GBMTFʹ͢ΔͳͲ ॠؒ෩଎ ը໘ಛੑ ϨϯμϦϯάํࣜ খ  4FSWFS4JEF3FOEFSJOH த

    ߴΩϟογϡώοτ ཰ 443$BDIF த ௿Ωϟογϡώοτ ཰ 1BSUJBM3FOEFSJOH ߴ  $MJFOU4JEF3FOEFSJOH
  45. 4VNNBSZ ϨϯμϦϯά
 ํࣜ /PEFෛՙ ద༻೉қ౓ 69 4&0 උߟ $43
 41"

    ˕ ˕ º º 443 $BDIF ˕ ˚ Ϣʔβґଘ͔൱͔ ͷ੍ޚɺUUMͷܾఆ ˚
 Ϣʔβ৘ใ͕
 'JSTU7JFXʹ͋ Δ৔߹ͷ੍ޚ ˕ ߴΩϟογϡ
 ώοτ཰͕ߴ͍
 Ϣʔβґଘ৘ใ͕ গͳ͍͜ͱ 1BSUJBM 3FOEFSJOH ˓ ˓
 'JSTU7JFX͔ ൱͔ͷ੍ޚ ˕ ˓
 +4ରԠ͍ͯ͠ͳ͍ ΫϩʔϥΛߟྀ͢ Δ͔ 443 ˚ ˕ ˕ ˕
  46. ·ͱΊ 5SBOTJUJPO ࣮૷લʹ։ൃऀશһ͕෼͔͓ͬͯ͘΂͖ PO&OUFSEBUBGFUDIHMPCBMTUBUFͷ࢒ΓʹؾΛ͚ͭΔ $PEF4QMJUUJOH XFCQBDLͱSFBDUSPVUFSΛ૊Έ߹Θ࣮ͤͯݱՄೳ NPEVMF*Eͷॱ൪ʹ͸ؾΛ͚ͭΔ 4FSWFS4JEF3FOEFSJOH λʔϯΞϥ΢ϯυλΠϜతʹ͸΍Βͳ͍ํ͕ૣ͍ Ωϟογϡ΍1BSUJBM3FOEFSJOH΋ݕ౼

    ෆཁͳ443͕࣮ߦ͞Εͳ͍Α͏IJTUPSZ"1*Ͱͷը໘ભҠΛجຊʹ ͦͷଞ ฐࣾϒϩάͰ΋৘ใൃ৴ IUUQFOHJOFFSSFDSVJUMJGFTUZMFDPKQUFDICMPH IUUQTSFDSVJUUFDIDPKQCMPH