Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

subroh_0508

July 29, 2020
Tweet

More Decks by subroh_0508

Other Decks in Technology

Transcript

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

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

    +BWBTDSJQUͷίʔυΛͭͷόϯυϧϑΝΠϧʹ·ͱΊΔ  8FCQBDLͷ୲౰Օॴɺ+4Ϟδϡʔϧͷґଘੑղܾ NJOJGZ ,PUMJO+4੡8FCΞϓϦΛϦϦʔε͢Δ·Ͱ ˞ গ͠ݹ͍͕ ,PUMJO'FTUͷ,PUMJO+4ͷηογϣϯΛࢀߟʹʜ ɹ:PV5VCFIUUQTZPVUVCF2S.*L) ϦϦʔε
  3. ˑϓϥάΠϯͷར༻ํ๏ 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ͷ৔߹΋ ΄΅ಉ͡खॱͰରԠՄೳʂ
  4. ˑϓϥάΠϯͷར༻ํ๏ 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.͔Βෆཁ
  5. ˑϓϥάΠϯͷར༻ํ๏ 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Λࢀߟʹʜ