Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

#SPXTFS 8൛ͷΞʔΩςΫνϟ Ұ෦ 4FSWFS #'' 4FSWFS #'' #SPXTFS TFTTJPOEBUB TFTTJPOEBUB ྲྀೖ࣌͸4FSWFSଆͰ443 4FSWFS4JEF3FOEFSJOH ͦͷޙϒϥ΢βͰ͸41" 4JOHMF1BHF"QQMJDBUJPO ͱͯ͠ಈ࡞ 6OJWFSTBM *TPNPSQIJD +4ͳ8ΞϓϦέʔγϣϯ "1* "1* "1*

Slide 4

Slide 4 text

ຊ೔ͷ಺༰ React with ReduxͰͷSPA + SSRͷ࡞Γํ΍" ͸·ͬͨͱ͜ΖͳͲΛڞ༗ 3FBDU3FEVYͱ͸ ࣦഊ͠ͳ͍ͨΊʹ͓͍֮͑ͯͯཉ͍͠બ 5SBOTJUJPO $PEF4QMJUUJOH 4FSWFS4JEF3FOEFSJOH

Slide 5

Slide 5 text

3FBDU3FEVYͱ͸

Slide 6

Slide 6 text

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`

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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\ʜ^ ʜ ^

Slide 9

Slide 9 text

$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͢ΔॲཧΛॻ͘ඞཁ͕͋Δ

Slide 10

Slide 10 text

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͕ఏڙ

Slide 11

Slide 11 text

ࣦഊ͠ͳ͍ͨΊʹ͓͍֮͑ͯͯཉ͍͠બ

Slide 12

Slide 12 text

5SBOTJUJPO

Slide 13

Slide 13 text

ը໘ભҠ࣌ʹى͍ͬͯ͜Δ͜ͱ ݕࡧϘλϯ࣮ߦ 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ͳͲ

Slide 14

Slide 14 text

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ଆͰ͸ϦμΠϨΫτΛ࢖͏

Slide 15

Slide 15 text

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/

Slide 16

Slide 16 text

ը໘ભҠ࣌ͷσʔλݕࡧΛͲ͜Ͱ΍Δ͔ 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ͷ༗ແ ˓ ʁ උߟ ը໘ભҠͷ͚࣮࣌ͩߦ ը໘ભҠҎ֎ͷ
 ༷ʑͳλΠϛϯάͰ࣮ߦ͞ΕΔ

Slide 17

Slide 17 text

J1IPOFͷը໘εϫΠϓͰͷ໭ΔਐΉ J1IPOFͰը໘εϫΠϓͯ͠໭ΔͱҰॠ໭Δલͷը໘͕ͪΒͭ͘͜ͱ͕͋Δ QPQ4UBUF࣌ʹ3PVUFS$POUFYUͷSFOEFSΛࢭΊ͍ͯΔͱൃੜ ը໘εϫΠϓͨ͠ॠؒ·ͩ໭Γݩͷը໘͕VONPVOU͞Ε͍ͯͳ͍ͨΊ ໭ͬͨॠؒ͸ ॠళฮৄࡉ͕දࣔ εϫΠϓͰτοϓը໘΁ ళฮը໘දࣔத τοϓදࣔ ˞ը໘εϫΠϓ͡Όͳͯ͘௨ৗͷϒϥ΢βόοΫͰ͸ൃੜ͠ͳ͍ ճආࡦ QVTI࣌ʹEBUBGFUDIͨ݁͠ՌΛϒϥ΢βʹΩϟογϡ͓ͯ͘͠ QPQ࣌ͷEBUBGFUDI͸ΩϟογϡΛ࢖ͬͯͬ͞͞ͱVONPVOU·Ͱ࣋ͬͯ͘

Slide 18

Slide 18 text

5SBOTJUJPOཁ఺ Ͳ͔͜Λ௚͢ͱͲ͔͕͜ಈ͔ͳ͘ͳΔɺ͕ى͜Γ΍͍͢ ಛʹSFEVY͸HMPCBMTUBUFͰݹ͍৘ใ͕࢒͍ͬͯΔͷͰ஫ҙ εϚϗ͸୺຤ґଘͷڍಈෆ৹͕݁ߏ͋ΔͷͰ࠷ॳ͔Β࣮ػ֬ೝΛ

Slide 19

Slide 19 text

$PEF4QMJUUJOH

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

4UFQ .POPMJUIJD +BWBTDSJQU NBJOKT XFCQBDL+TPOQ DIVOLNBOJGFTUKT BQQ BQQKT BQQ/ BQQ/KT #FGPSF "GUFS ·ͣը໘͝ͱͷKTΛ෼ׂ͢Δ BQQDPNNPO SEQBSUZ NBJOKT

Slide 23

Slide 23 text

ը໘ຖͷ+4෼ׂ { require.ensure([], function (require) { cb(null, require(‘Componentͷύε’).default); },’jsͷϑΝΠϧ໊’); }} /> SFBDUSPVUFSͱXFCQBDLͷSFRVJSFFOTVSFΛ૊Έ߹Θ࣮ͤͯݱՄೳ SFRVJSFFOTVSFΛίʔυʹهࡌͯ͠Ϗϧυ͢ΔͱKT͕෼ׂ͞ΕΔ 3PVUFͷHFU$PNQPOFOUͰهࡌ͢Δ͜ͱͰը໘ຖʹ෼ׂՄ #FGPSF "GUFS plugins: [ new CommonsChunkPlugin(‘chunkmanifest’, 'chunkmanifest-[chunkhash].js', 2), ], ϧʔςΟϯάఆٛ ෼ׂͨ͠KTͷಈతϩʔυͷઃఆ

Slide 24

Slide 24 text

ը໘ભҠ࣌ͷ+4μ΢ϯϩʔυ ෼ׂͨ͠+4Λ443࣌ʹग़ྗ͢ΔIUNMͷTDSJQUʹ ؚΊΔͱɺ443௚ޙʹμ΢ϯϩʔυ͢Δ ؚΊͳ͍ͱɺը໘ભҠ࣌ʹμ΢ϯϩʔυ͢Δ Ϣʔβ ૢ࡞ #SPXTFS 4FSWFS DIVOLNBOJGFTUʜKTऔಘ #ʜKTऔಘ "ʜKTऔಘ #ը໘ʹભҠ HFU$PNQPOFOU࣌ 4FSWFS4JEF3FOEFSJOH "ը໘ʹྲྀೖ NBJOʜKTऔಘ IUNM TDSJQUTSDDIVOLNBOJGFTUʜKT TDSJQUTSDNBJOʜKT TDSJQTSD"ʜKT

Slide 25

Slide 25 text

4DSJQU-PBE&SSPS { require.ensure([], function (require) { cb(null, require(‘Componentͷύε’).default); }, function () { // reload if script loading failed window.location.reload(); }, ’jsͷϑΝΠϧ໊’); }}> ૉͷXFCQBDLYܥͩͱSFRVJSFFOTVSF಺ͷTDSJQUMPBEFSSPSΛर͑ͳ͍ ͜ͷ࣌SFRVJSFFOTVSFͷDBMMCBDL͕࣮ߦ͞Εͳ͍ͷͰը໘ભҠͤͣʹఀࢭ SFRVJSFFOTVSFFSSPSIBOEMFSΛ࢖ͬͯΤϥʔϋϯυϦϯάՄೳ

Slide 26

Slide 26 text

݁Ռ .POPMJUIJD +BWBTDSJQU NBJOKT BQQDPNNPO SEQBSUZ NBJOKT BQQ BQQKT BQQ/ BQQ/KT #FGPSF "GUFS XFCQBDL+TPOQ DIVOLNBOJGFTUKT ࢒Γ͸SEQBSUZͱΞϓϦέʔγϣϯͷڞ௨NPEVMFͷ෼ׂ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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௥Ճ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ࢀߟɿ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’])

Slide 31

Slide 31 text

݁Ռ .POPMJUIJD +BWBTDSJQU NBJOKT SEQBSUZ WFOEPSKT BQQDPNNPO NBJOKT XFCQBDL+TPOQ DIVOLNBOJGFTUKT BQQ BQQKT BQQ/ BQQ/KT #FGPSF "GUFS มߋ
 ස౓ ଟ গ ϑΝΠϧ
 αΠζ খ େ

Slide 32

Slide 32 text

4FSWFS4JEF3FOEFSJOH

Slide 33

Slide 33 text

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͸ඞ࣮ͣߦ͢Δඞཁ͕͋Δ

Slide 34

Slide 34 text

1FSGPSNBODF RPS : 17.02 ϨεϙϯελΠϜฏۉ:578 msec RenderToStringͷ࣌ؒ: 60 ~ 80 msec 2,893 Component ˞BCODͰܭଌͨ݁͠Ռ ˞.BD#PPL1SP ()[*OUFM$PSFJ /PEFW ˞"1*ίʔϧ͸আ͍ͨ݁Ռ

Slide 35

Slide 35 text

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͕ϥοϓ͞Εͨ΋ͷ

Slide 36

Slide 36 text

4PMVUJPO ϒοΩϯάςʔϒϧͰ͸ҎԼͷରԠΛ࣮ࢪ 1BSUJBM3FOEFSJOH 443$BDIF $PNQPTJUF3FOEFSJOH

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

1BSUJBM3FOEFSJOH RPS : 17.02 -> 62.64 ϨεϙϯελΠϜฏۉ:578 -> 150 msec RenderToStringͷ࣌ؒ: 60 ~ 80 -> 10 ~ 20 msec 2,893 -> 359 Component

Slide 40

Slide 40 text

b'FUDIBT(PPHMF`ͷ݁Ռ 1BSUJBM3FOEFSJOHͰ΋εΫϩʔϧҎԼؚΊશίϯςϯπೝࣝ
 ˞'JSTU7JFX͕ͳ͍௨ৗͷ41"Ͱ΋$43ޙͷίϯςϯπ͕ೝࣝ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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͞Εͳ͍Α͏ʹ࣮૷͓ͯ͘͠

Slide 44

Slide 44 text

ࢀߟɿ$PNQPTJUF3FOEFSJOH Ұఆ࣌ؒ಺ͷϦΫΤετ਺ʹԠͯ͡ಈతʹ3FOEFSJOHํࣜΛ੾Γସ͑Δํࣜ ௨ৗ࣌͸SFOEFS3FBEZUSVFʹ͓͖ͯ͠ߴෛՙ࣌͸GBMTFʹ͢ΔͳͲ ॠؒ෩଎ ը໘ಛੑ ϨϯμϦϯάํࣜ খ 4FSWFS4JEF3FOEFSJOH த ߴΩϟογϡώοτ ཰ 443$BDIF த ௿Ωϟογϡώοτ ཰ 1BSUJBM3FOEFSJOH ߴ $MJFOU4JEF3FOEFSJOH

Slide 45

Slide 45 text

4VNNBSZ ϨϯμϦϯά
 ํࣜ /PEFෛՙ ద༻೉қ౓ 69 4&0 උߟ $43
 41" ˕ ˕ º º 443 $BDIF ˕ ˚ Ϣʔβґଘ͔൱͔ ͷ੍ޚɺUUMͷܾఆ ˚
 Ϣʔβ৘ใ͕
 'JSTU7JFXʹ͋ Δ৔߹ͷ੍ޚ ˕ ߴΩϟογϡ
 ώοτ཰͕ߴ͍
 Ϣʔβґଘ৘ใ͕ গͳ͍͜ͱ 1BSUJBM 3FOEFSJOH ˓ ˓
 'JSTU7JFX͔ ൱͔ͷ੍ޚ ˕ ˓
 +4ରԠ͍ͯ͠ͳ͍ ΫϩʔϥΛߟྀ͢ Δ͔ 443 ˚ ˕ ˕ ˕

Slide 46

Slide 46 text

·ͱΊ 5SBOTJUJPO ࣮૷લʹ։ൃऀશһ͕෼͔͓ͬͯ͘΂͖ PO&OUFSEBUBGFUDIHMPCBMTUBUFͷ࢒ΓʹؾΛ͚ͭΔ $PEF4QMJUUJOH XFCQBDLͱSFBDUSPVUFSΛ૊Έ߹Θ࣮ͤͯݱՄೳ NPEVMF*Eͷॱ൪ʹ͸ؾΛ͚ͭΔ 4FSWFS4JEF3FOEFSJOH λʔϯΞϥ΢ϯυλΠϜతʹ͸΍Βͳ͍ํ͕ૣ͍ Ωϟογϡ΍1BSUJBM3FOEFSJOH΋ݕ౼ ෆཁͳ443͕࣮ߦ͞Εͳ͍Α͏IJTUPSZ"1*Ͱͷը໘ભҠΛجຊʹ ͦͷଞ ฐࣾϒϩάͰ΋৘ใൃ৴ IUUQFOHJOFFSSFDSVJUMJGFTUZMFDPKQUFDICMPH IUUQTSFDSVJUUFDIDPKQCMPH