Kotlin/JSのバンドルファイルをちょっと頑張って削減する

 Kotlin/JSのバンドルファイルをちょっと頑張って削減する

Kotlin愛好会 vol.23の談義資料です。

https://love-kotlin.connpass.com/event/183232/

COLOR M@STER
- URL: https://imas-colormaster.web.app/
- GitHub: https://github.com/subroh0508/colormaster

7c3b3366947123ba6772698b09edf4e2?s=128

subroh_0508

July 29, 2020
Tweet

Transcript

  1. ,PUMJO+4ͷόϯυϧϑΝΠϧΛ ͪΐͬͱؤுͬͯ࡟ݮ͢Δ ,PUMJOѪ޷ձWPM ʹ͜͠Γ͞ͿΖʙ!TVCSPI@

  2. "CPVU.F ʹ͜͠Γ͞ͿΖʙ ✦౦ژ౎ɾҏ౾େౡग़਎ ✦גࣜձࣾ#FBS5BJM ‣ "OESPJEΤϯδχΞ ,PUMJO+BWB ˑ ‣ 8FCΤϯδχΞ

    3BJMT3FBDU
  3. গ͚ͩ͠એ఻ $0-03.!45&3 w ΞΠϚεΩϟϥΫλʔͷ ΠϝʔδΧϥʔݕࡧ ϖϯϥΠτ w 8FC൛Λ,PUMJO+4Ͱ࣮૷ʂ ,PUMJO཰ʂ 63-IUUQTJNBTDPMPSNBTUFSXFCBQQ

    (JU)VCTVCSPIDPMPSNBTUFS
  4. গ͚ͩ͠એ఻ $0-03.!45&3 w ,UPSLPUMJOYTFSJBMJ[FS,PEFJO w 3FBDU IPPLT 3FBDU3PVUFS .BUFSJBM6*JOFYU ϨεϙϯγϒରԠʂຊ৬"OESPJEΤϯδχΞͩ͠ʜ

    μʔΫςʔϚରԠʂμʔΫςʔϚΧοί͍͍͡ΌΜ ଟݴޠରԠʂւ֎޲͚ʹઆ໌͠΍͔ͨͬͨ͘͢͠
  5. ࿩͢͜ͱ 㾎,PUMJO+4Ͱ8FCΞϓϦΛ࣮૷ͨ࣌͠ʹಘͨɺ஌ݟͷڞ༗ 㾎ʰ+4ͷόϯυϧϑΝΠϧΛখ͘͢͞ΔʱͨΊͷ஌ݟ 㾎ࠓޙͷ,PUMJO+4ͷల๬

  6.  ֤छϥΠϒϥϦΛ࢖͍ɺΠΠײ͡ʹ6* ϩδοΫΛ࣮૷͢Δ  ࠓճ͸লུ  ,PUMJOͷίʔυΛ+BWBTDSJQUͷίʔυʹม׵͢Δ  (SBEMFͷ୲౰Օॴɺ,PUMJOϥΠϒϥϦͷґଘੑղܾ 

    +BWBTDSJQUͷίʔυΛͭͷόϯυϧϑΝΠϧʹ·ͱΊΔ  8FCQBDLͷ୲౰Օॴɺ+4Ϟδϡʔϧͷґଘੑղܾ NJOJGZ ,PUMJO+4੡8FCΞϓϦΛϦϦʔε͢Δ·Ͱ ˞ গ͠ݹ͍͕ ,PUMJO'FTUͷ,PUMJO+4ͷηογϣϯΛࢀߟʹʜ ɹ:PV5VCFIUUQTZPVUVCF2S.*L) ϦϦʔε
  7.  ֤छϥΠϒϥϦΛ࢖͍ɺΠΠײ͡ʹ6* ϩδοΫΛ࣮૷͢Δ  ࠓճ͸লུ  ,PUMJOͷίʔυΛ+BWBTDSJQUͷίʔυʹม׵͢Δ  (SBEMFͷ୲౰Օॴɺ,PUMJOϥΠϒϥϦͷґଘੑղܾ 

    +BWBTDSJQUͷίʔυΛͭͷόϯυϧϑΝΠϧʹ·ͱΊΔ  8FCQBDLͷ୲౰Օॴɺ+4Ϟδϡʔϧͷґଘੑղܾ NJOJGZ ,PUMJO+4੡8FCΞϓϦΛϦϦʔε͢Δ·Ͱ ˞ গ͠ݹ͍͕ ,PUMJO'FTUͷ,PUMJO+4ͷηογϣϯΛࢀߟʹʜ ɹ:PV5VCFIUUQTZPVUVCF2S.*L) ϦϦʔε
  8. ʮ࣮૷Ͱ͖ͨʔʂϦϦʔε͢Δͧʯ  QSPEVDUJPOϏϧυͰ.#ʂ  8FCQBDLͷܯࠂ͕ग़Δͷ͸,#Λ௒͑ͨ࣌  େ͖͗͢Δͱॳճϩʔυ͕஗͘ͳΔɹύϑΥʔϚϯε͕௿Լ͢Δ ,PUMJO+4੡8FCΞϓϦΛϦϦʔε͢Δ·Ͱ Ͳ͏ʹ͔ͯ͠όϯυϧϑΝΠϧͷαΠζΛ খ͘͞͠ͳ͚Ε͹ͳΒͳ͍ʜ

  9. ˑ͍͔ͭ͘ηΦϦʔ͕͋Δ  8FCQBDLͷ5SFF4IBLJOH͕༗ޮʹͳΔΑ͏ίʔυΛमਖ਼͢Δ  +4ϞδϡʔϧΛ֎෦Խ͠ɺ$%/͔Βऔಘ͢ΔΑ͏ʹ͢Δ  8FCQBDLͷ$PEF4QMJUUJOHΛ༗ޮʹ͢ΔFUD όϯυϧϑΝΠϧΛখ͘͢͞ΔͨΊʹ

  10. ˑ͍͔ͭ͘ηΦϦʔ͕͋Δ  8FCQBDLͷ5SFF4IBLJOH͕༗ޮʹͳΔΑ͏ίʔυΛमਖ਼͢Δ  +4ϞδϡʔϧΛ֎෦Խ͠ɺ$%/͔Βऔಘ͢ΔΑ͏ʹ͢Δ  8FCQBDLͷ$PEF4QMJUUJOHΛ༗ޮʹ͢ΔFUD όϯυϧϑΝΠϧΛখ͘͢͞ΔͨΊʹ ࠷΋؆୯Ͱ༗ޮʂ

  11. w 8FCQBDL+4Ϟδϡʔϧͷґଘੑղܾ ͭͷόϯυϧʹ·ͱΊΔ  5SFF4IBLJOHະ࢖༻ϞδϡʔϧΛࣗಈݕ஌͠ɺόϯυϧ͔Βআ֎ ྫ.BUFSJBM6* w छྨҎ্ͷ6*ίϯϙʔωϯτؚ͕·ΕΔϞδϡʔϧ w #VUUPO͚ͩ࢖͍ͬͯΔˠͦΕҎ֎͸શͯόϯυϧ͔Βআ֎ʂ

    8FCQBDLͷ5SFF4IBLJOH JNQPSUจΛॻ͖׵͑Δ͚ͩʂ "OESPJEͰ͸3͕୲౰͢Δॲཧ
  12. w 8FCQBDL+4Ϟδϡʔϧͷґଘੑղܾ ͭͷόϯυϧʹ·ͱΊΔ  5SFF4IBLJOHະ࢖༻ϞδϡʔϧΛࣗಈݕ஌͠ɺόϯυϧ͔Βআ֎ ྫ.BUFSJBM6* w छྨҎ্ͷ6*ίϯϙʔωϯτؚ͕·ΕΔϞδϡʔϧ w #VUUPO͚ͩ࢖͍ͬͯΔˠͦΕҎ֎͸શͯόϯυϧ͔Βআ֎ʂ

    8FCQBDLͷ5SFF4IBLJOH JNQPSUจΛॻ͖׵͑Δ͚ͩʂ "OESPJEͰ͸3͕୲౰͢Δॲཧ ͜Ε͸+BWBTDSJQUͷΈͷ৔߹ ,PUMJO+4Ͱ͸ʜʁ
  13. ˑ5SFF4IBLJOHΛ༗ޮʹ͢Δʹ͸ɺίʔυ͕&4४ڌͰ͋Δ͜ͱ͕ඞਢʂ  &4+BWBTDSJQUͷඪ४ن֨ɺੜͷ+BWBTDSJQUͱ͸গ͠จ๏͕ҧ͏ ˑ,PUMJO+4͔Βు͖ग़͞ΕΔ+BWBTDSJQUˠੜͷ+BWBTDSJQUίʔυ  &4ʹ४ڌ͍ͯ͠ͳ͍+BWBTDSJQUίʔυ͕ੜ੒͞ΕΔ  ݱঢ়ͷ,PUMJO+4Ͱ͸ 5SFF4IBLJOHΛ༗ޮʹ͢Δ͜ͱ͸ෆՄೳ 8FCQBDLͷ5SFF4IBLJOHPO,PUMJO+4

    ͖͋ΒΊͯʜͨ·Δ͔ʜ
  14. ˑ͍͔ͭ͘ηΦϦʔ͕͋Δ  8FCQBDLͷ5SFF4IBLJOH͕༗ޮʹͳΔΑ͏ίʔυΛमਖ਼͢Δ  +4ϞδϡʔϧΛ֎෦Խ͠ɺ$%/͔Βऔಘ͢ΔΑ͏ʹ͢Δ  8FCQBDLͷ$PEF4QMJUUJOHΛ༗ޮʹ͢ΔFUD όϯυϧϑΝΠϧΛখ͘͢͞ΔͨΊʹ

  15. ˑ͍͔ͭ͘ηΦϦʔ͕͋Δ  8FCQBDLͷ5SFF4IBLJOH͕༗ޮʹͳΔΑ͏ίʔυΛमਖ਼͢Δ  +4ϞδϡʔϧΛ֎෦Խ͠ɺ$%/͔Βऔಘ͢ΔΑ͏ʹ͢Δ  8FCQBDLͷ$PEF4QMJUUJOHΛ༗ޮʹ͢ΔFUD όϯυϧϑΝΠϧΛখ͘͢͞ΔͨΊʹ

  16. ˑར༻͍ͯ͠Δ+4ϞδϡʔϧΛ$%/αʔόʔ͔Βݸผऔಘ͠ɺར༻͢Δ  όϯυϧϑΝΠϧʹ֎෦ͷ+4ϞδϡʔϧΛؚ·ͳ͍ˠαΠζ࡟ݮʂ +4Ϟδϡʔϧͷ֎෦Խ CFGPSF BGUFS όϯυϧϑΝΠϧ ֎෦Խͨ͠+4Ϟδϡʔϧ $%/αʔόʔ͔ΒΩϟογϡࡁΈͷ +4ϞδϡʔϧΛऔಘˠߴ଎ʂ

    όϯυϧϑΝΠϧ
  17. ˑ+BWBTDSJQUͷΈͷ৔߹  8FCQBDLͷઃఆมߋ  8FCQBDL$EO1MVHJO )UNM8FCQBDL1MVHJOΛར༻͢Δ +4Ϟδϡʔϧͷ֎෦ԽPO+BWBTDSJQU 8FCQBDL$EO1MVHJOTIJSPUFDIXFCQBDLDEOQMVHJO )UNM8FCQBDL1MVHJOKBOUJNPOIUNMXFCQBDLQMVHJO

  18. ˑϓϥάΠϯͷར༻ํ๏ PO+BWBTDSJQU  +4Ϟδϡʔϧͷ֎෦ԽPO+BWBTDSJQU "devDependencies": { "html-webpack-plugin": "^3.2.0", "webpack-cdn-plugin": "^3.2.2",

    ... } QBDLBHFKTPOʹ ϓϥάΠϯͷґଘؔ܎Λ௥Ճ config.plugins.push( new HtmlWebpackPlugin(), new WebpackCdnPlugin({ modules: [ { name: 'react', path: 'umd/react.production.min.js', }, ... ], publicPath:'/node_modules', }), ); 3&"%.&ʹैͬͯ XFCQBDLDPOpHKTʹઃఆΛ௥Ճ ,PUMJO+4ͷ৔߹΋ ΄΅ಉ͡खॱͰରԠՄೳʂ
  19. ˑϓϥάΠϯͷར༻ํ๏ PO,PUMJO+4   (SBEMFʹϓϥάΠϯͷґଘؔ܎Λ௥Ճ +4Ϟδϡʔϧͷ֎෦ԽPO,PUMJO+4 dependencies { ... implementation(devNpm("html-webpack-plugin",

    "^3.2.0")) implementation(devNpm("webpack-cdn-plugin", "^3.2.2")) } // v1.4-M3からは不要 fun devNpm(name: String, version: String = "*") = NpmDependency(project, name, version, NpmDependency.Scope.DEV) EFW%FQFOEFODJFTʹ ґଘؔ܎͕௥Ճ͞ΕΔΑ͏ʹ WͰ͸֦ுؔ਺ͷ ఆ͕ٛඞཁ ˞(SBEMFͷDPNQMJF0OMZͱಉ͡ҙຯ ˞W.͔Βෆཁ
  20. ˑϓϥάΠϯͷར༻ํ๏ PO,PUMJO+4   Ϟδϡʔϧͷ௚ԼʹXFCQBDLDPOpHE  ۭͷKTϑΝΠϧΛ࡞੒ ໊લ͸ԿͰ΋0, +4Ϟδϡʔϧͷ֎෦ԽPO,PUMJO+4 ͜͜ʹஔ͍ͨKTϑΝΠϧͰ

    8FCQBDLͷઃఆΛ্ॻ͖Ͱ͖Δʂ
  21. ˑϓϥάΠϯͷར༻ํ๏ PO,PUMJO+4   8FCQBDL$EO1MVHJO )UNM8FCQBDL1MVHJOͷઃఆΛ௥Ճ +4Ϟδϡʔϧͷ֎෦ԽPO,PUMJO+4 config.plugins.push( new HtmlWebpackPlugin({

    template: path.resolve(webAppPath, '...'), filename: path.resolve(webAppPath, '...'), }), ); if (config.mode === 'production') { config.externals = [{ react: 'React' }, ...]; config.plugins.push( new WebpackCdnPlugin({ modules: [{ name: 'react', path: '...' }, ...], pathToNodeModules: path.resolve(rootPath, 'build/js'), }), ); } ৄࡉ͸1MVHJOͷ 3&"%.&NEΛࢀߟʹʜ
  22. ˑ8FCQBDL1MVHJOಋೖޙͷόϯυϧαΠζ  .#.#ɺ,#ͷ࡟ݮʂ +4Ϟδϡʔϧͷ֎෦ԽPO,PUMJO+4 ·ͩ.#Λ௒͑ͯ͠·͍ͬͯΔʜ ֎෦Խ͚ͨͩ͠Ͱɺ૯௨৴ྔ͸มΘΒͳ͍ʜ

  23. ˑ,PUMJOͰಋೖ͞ΕΔɺ৽ͨͳ*3ίϯύΠϥόοΫΤϯυ  %FBE$PEF&MJNJOBUJPOͷ࠷దԽ ˠτϥϯεύΠϧޙͷ+BWBTDSJQUϑΝΠϧͷαΠζ͕େ෯ʹখ͘͞ʂ ࠓޙͷల๬ +FU#SBJOTᐌ͘ɺ൒෼ۙ͘খ͘͞Ͱ͖ΔΒ͍͠ ϗϯϚ͔ʜʁʁʁ ग़య,PUMJO.3FMFBTFE IUUQTCMPHKFUCSBJOTDPNLPUMJOLPUMJONSFMFBTFE

  24. ˑ,PUMJOͰಋೖ͞ΕΔɺ৽ͨͳ*3ίϯύΠϥόοΫΤϯυ  खݩͷ,PUMJO+4ίʔυͰࢼͯ͠ΈͨˠΊͬͪΌখ͘͞ͳͬͨʂ ࠓޙͷల๬ ,#,# ֤छϥΠϒϥϦͷରԠΛ଴ͭඞཁ͸͋Δ΋ͷͷ ະདྷ͸໌Δ͍ʂ

  25. ˑকདྷతʹ௥Ճ͞Εͦ͏ͳػೳ  ,PUMJO+4͔Β&4ϞδϡʔϧΛੜ੒͢Δػೳ ࠓޙͷల๬ ग़య,PUMJO$POGʮ5IFTUBUFPG,PUMJO+4ʯ IUUQTSFTPVSDFTKFUCSBJOTDPNTUPSBHFQSPEVDUTLPUMJODPOGTMJEFT5IVSTEBZ"VE 4"JHOFS 5IF4UBUFPG,PUMJO+4QEG &4Ͱग़ྗ͞ΕΔͳΒ͹ 5SFF4IBLJOH͕༗ޮʹͳΔՄೳੑ͕ߴ͍ʂ

  26. ·ͱΊ w ,PUMJO+4ͰϦονͳ8FCΞϓϦΛ࣮૷͢Δ͜ͱ͸Մೳʂ w ຊ൪ϦϦʔε࣌ɺͲ͏ͯ͠΋ωοΫʹͳΔόϯυϧαΠζͷ࡟ݮ  8FCQBDL1MVHJOΛ࢖ͬͨ࡟ݮख๏͕,PUMJO+4Ͱ΋࢖͑Δʂ  Ͱߋʹখ͘͞Ͱ͖Δ༨஍͋Γʂɹ&4ରԠɺૣ͘དྷͯཉ͍͠ʂ ೥ޙ൒Ҏ߱ɺͲΜͲΜະདྷ͕໌Δ͘ͳΓͭͭ͋Δ,PUMJO+4

    +7.ͱ8FCͷੈքɺ྆ํோΊΔͷ͸ָ͍ͧ͠ʂ 5IBOLZPVGPSMJTUFOJOH ˞+BWBTDSJQUͷ࿩͹͔ͬΓͰɺ͢Έ·ͤΜͰͨ͠