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

15分でわかった気になるVite / Explain Vite in 15 minutes

15分でわかった気になるVite / Explain Vite in 15 minutes

慶島亜門(LINE Growth Technology UIT1チーム)
UIT Meetup vol. 13 『知っておきたいFront-end Toolingの今』
での登壇資料です
https://uit.connpass.com/event/216043/

LINE Developers

July 07, 2021
Tweet

More Decks by LINE Developers

Other Decks in Technology

Transcript

  1. IUUQTWJUFKTEFWΛϕʔεʹ Ұ෦ਂງΓͭͭ͠ ෼Ͱ7JUFΛΘ͔ͬͨؾʹͤͪ͞Ό͓͏ あ " そ " ゆ " こ

    と ね 完 全 に 理 解 し た ※この発表が終わった後の みなさんのイメージ
  2. ։ൃ࣌͸αʔόʔ ຊ൪Ϗϧυ࣌͸όϯυϥʔͱͯ͠ಈ͘ ಛ௃ 7JUFͬͯͳʹ ։ൃ࣌ʹ͸ FTCVJME Λ࢖༻ͯ͠ߴ଎ʹґଘύοέʔδΛϏϧυ ϒϥ΢βͷ&4.PEVMFରԠΛ͏·͘ར༻ͨ͠ߴ଎ͳ։ൃମݧ &4.PEVMF &4.PEVMF

    EZOBNJDJNQPSUରԠϒϥ΢β͕λʔήοτ !WJUFKTQMVHJOMFHBDZΛ࢖͏͜ͱͰɺϨΨγʔϒϥ΢β޲͚ͷαϙʔτ͸Ͱ͖Δ ʢ7JUFࣗମͰ*&ͷαϙʔτ͸ߦ͑ΔͬΆ͍͕ɺ7VF͸*&Λαϙʔτ͠ͳ͍఺ʹ஫ҙʣ 7VFҎ֎ͷϑϩϯτΤϯυϥΠϒϥϦʹ΋ରԠ 3FBDU1SFBDU -JU&MFNFOU7BOJMMB+4ʹରԠ͍ͯ͠Δ
  3. %FQFOEFODZ1SFCVOEMJOH 7JUF͸ԿΛ͍ͯ͠Δͷ ͱ͍͏Α͏ͳίʔυ͕͋Ε͹ɺ OPEF@NPEVMFTWJUF ͷԼʹ FTCVJME ͰϏϧυͨ͠ϑΝΠϧΛஔ͍ͯɺͦΕΛࢀরͤ͞Δػೳ ͜ͷͱ͖ $PNNPO+4 6.%ˠ

    &4.΁ͷม׵΋ඞཁʹԠͯ͡ߦ͏ ˞ग़యɿIUUQTFTCVJMEHJUIVCJP import { chunk } from 'lodash-es'; ˞ग़యɿ IUUQTWJUFKTEFWHVJEFEFQQSFCVOEMJOHIUNM
  4. #BSFNPEVMFJNQPSUΛॻ͖׵͑Δ 7JUF͸ԿΛ͍ͯ͠Δͷ ϒϥ΢β্Ͱ &4.PEVMF ͷ JNQPSUΛߦ͍ͬͯ͘ 7JUF Λ࢖ͬͨ։ൃ؀ڥͰ͸ import Vue

    from 'vue'; ͱ͍ͬͨίʔυͰ 7VFΛਖ਼͘͠ղܾ͢Δ͜ͱ͕Ͱ͖ͳ͍ ͦͷͨΊ 7JUF Ͱ͸ import Vue from ‘/node_modules/.vite/vue.js?v=f3sf2ebd'; ͷΑ͏ͳܗ΁ͱॻ͖׵͑ͯ͘ΕΔ max-age=31536000,immutable ͰڧྗʹΩϟογϡ͠·͢ ˞ग़యɿ IUUQTWJUFKTEFWHVJEFGFBUVSFTIUNM
  5. )PU.PEVMF3FMPBE ).3 7JUF͸Կ͕Ͱ͖Δͷ 7VF4'$΁ͷαϙʔτͱ 3FBDU'BTU3FGSFTI΁ͷαϙʔτΛϑΝʔετύʔςΟͰߦ͍ͬͯΔ 1SFBDU ΋αʔυύʔςΟͷ !QSFGSFTIWJUF Ͱαϙʔτ͍ͯ͠Δ ͱ͍͍ͭͭ΋ʜ

    OQN JOJU !WJUFKTBQQͰ࡞ΒΕͯͨ 7VF3FBDU1SFBDU 4WFMUFϓϩδΣΫτʹ͍ͭͯ͸ ࠷ॳ͔Β).3͕αϙʔτ͞Εͨঢ়ଶͰ։ൃΛ࢝ΊΔ͜ͱ͕Ͱ͖Δ ஫IUUQTHJUIVCDPNWJUFKTWJUFUSFFNBJOQBDLBHFTDSFBUFBQQ Λݟͨײ͡ MJUFMFNFOUͱ WBOJMMB͸ະରԠ ˞ग़యɿ IUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMIPUNPEVMFSFQMBDFNFOU
  6. 5ZQF4DSJQUͷτϥϯεύΠϧ 7JUF͸Կ͕Ͱ͖Δͷ 5ZQF4DSJQU͸࠷ॳ͔ΒରԠࡁΈɻͨͩ͠ɺܕνΣοΫΛߦΘͣτϥϯεύΠϧ͚ͩߦ͏ɻ ΈΜͳ74$PEFͳΓɺ*OUFMMJ+ͳΓɺΤσΟλࣗ਎͕54ͷܕνΣοΫͰ͖Δ؀ڥͰॻ͍ͯΔΑͶʁ ͱ͍͏͜ͱͬΆ͍ FTCVJME ͕ 54ͷτϥϯεύΠϧΛߦ͏͕ɺUTD ʹൺ΂ͯഒ଎͍Β͍͠ ҰԠ੒໿΋͋ͬͯɺDPOTUFOVN

    ͱ͔ JNQMJDJUUZQFPOMZJNQPSUT͸࢖͑ͳ͍ͱ͍ͯ͠Δ Λ͢Δ͜ͱΛਪ঑͞Ε͍ͯΔ λʔϛφϧ΍$*؀ڥͳͲͰܕνΣοΫ௨Βͳ͔ͬͨΒΤϥʔʹ͢Δʜͱ͔΍Γ͚ͨΕ͹ Λ࢖͑͹0, tsc --noEmit // or vue-tsc --noEmit ˞WVFUTD ʹ͍ͭͯ͸࠷ޙʹ৮Ε·͢ compilerOptions.isolatedModules = true ˞ग़యɿ IUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMUZQFTDSJQU
  7. $44$PEF4QMJUUJOH #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ '06$ 'MBTIPGVOTUZMFE DPOUFOU Λ๷͙ͨΊɺEZOBNJDJNQPSUͰಡΈࠐΉ DIVOL͕ ௥Ճͷ DTT

    Λ ಡΈࠐΉ৔߹͸ɺઌʹ $44ͷ MPBE͕ऴΘ͔ͬͯΒ DIVOLΛಡΉΑ͏ʹͯ͘͠ΕΔ ˞ग़యɿIUUQTHJUIVCDPNWJUFKTWJUFCMPCNBJOQBDLBHFTWJUFTSDOPEFQMVHJOTJNQPSU"OBMZTJT#VJMEUT- IUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMDTTDPEFTQMJUUJOH const e = await h( (() => import("./lib-a.5453f0dd.js")), [ "/assets/lib-a.5453f0dd.js", "/assets/common.16805b00.js", "/assets/common.3313c481.css” ] ) ˢ Ϗϧυ͞ΕͨίʔυͷҰ෦
  8. 1SFMPBE%JSFDUJWFT(FOFSBUJPO #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ ॳظಡΈࠐΈ࣌ʹඞཁʹͳΔDIVOLʹରͯ͠ MJOLSFMlQSFMPBEzλάΛIUNMʹຒΊࠐΜͰ͘ΕΔ <html lang="en"> <head> <link rel="icon"

    href="/favicon.ico" /> <title>Vite App</title> <script type="module" crossorigin src="/assets/index.dc67d65e.js"></script> <link rel="modulepreload" href="/assets/vendor.0b16fac1.js"> <link rel="stylesheet" href="/assets/index.4ace5166.css"> </head> <body> <div id="app"></div> </body> </html> ˞ग़యɿIUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMQSFMPBEEJSFDUJWFTHFOFSBUJPO
  9. "TZOD$IVOL-PBEJOH0QUJNJ[BUJPO #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ %ZOBNJDJNQPSUͰ JNQPSUͨ͠ ෳ਺ͷ DIVOL͔Β ͞Βʹڞ௨ͷ DIVOLʹରͯ͠ EJSFDUJNQPSUΛ͢Δέʔε

    $PNNPODIVOL$ $IVOL" %ZOBNJDJNQPSU &OUSZ $IVOL# %JSFDUJNQPSU ͜ͷέʔεͰɺΑΓޮ཰ͷ͍͍νϟϯΫͷऔΓํΛ͢ΔΑ͏ʹίʔυΛ࠷దԽ͠·͢ ˞ग़యɿIUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMBTZODDIVOLMPBEJOHPQUJNJ[BUJPO
  10. 3PMMVQ༻ͷ1MVHJOΛαϙʔτ 1MVHJO 7JUF͸Կ͕Ͱ͖Δͷ 7JUF ʹ͸ SPMMVQΛϕʔεʹͨ͠ϓϥάΠϯγεςϜ͕ଘࡏ͢Δɻ Ұൠతͳ 8FC։ൃͷ৔߹ 7JUF Ͱଟ͘ͷϢʔεέʔεΛΧόʔͰ͖Δ͜ͱ͔Β

    ϓϥάΠϯ͢Βඞཁͳ͍Αͱͭͭ͠΋ɺ3PMMVQ༻ͷ QMVHJOΛ࢖͏͜ͱ΋Ͱ͖Δ ˞ग़యɿIUUQTWJUFKTEFWHVJEFVTJOHQMVHJOTIUNM !SPMMVQQMVHJOFTMJOU ΛೖΕͯΈͨྫ
  11. 4OPXQBDL ଞͷόϯυϥʔͱൺ΂ͯ ʮ&4.PEVMF ͕ϕʔεʹ͋Δʯ ʮ։ൃத͸όϯυϧ͠ͳ͍΋ͷΛ TFSWF͢ΔʯΈ͍ͨͳɺํ޲ੑ͸ࣅ͍ͯΔͬΆ͍ 7JUFT EFQFOEFODZQSFCVOEMJOHJTBMTPJOTQJSFECZ4OPXQBDLW ͱ͋ΔΑ͏ʹɺӨڹΛड͚͍ͯΔ෦෼΋͋ΔΑ͏ͩ ͍ΖΜͳόϯυϥʔͱʮ޿͘ઙ͘ʯͱ͍ͬͨҹ৅ͷ4OPXQBDLʹൺ΂ͯ

    7JUF ͸ 3PMMVQͱΨοπϦ JOUFHSBUFE͞Ε͍ͯΔͷͰɺ΍ΕΔ͜ͱ͕ଟ͍ͱݴΘΕ͍ͯΔ ʢݸਓతʹ͸ 'JSTUDMBTTͷ 7VF αϙʔτ͕σΧ͍ͱࢥͬͯ·͢ʂʣ ʢ͜ͷ͋ͱͷࡾ޷͞Μͷൃද΍ 6*5*OTJEFͰ΋ 4OPXQBDLʹ͍ͭͯ৮Ε͍ͯΔͷͰΑ͔ͬͨΒʜʣ ˞ग़యɿIUUQTWJUFKTEFWHVJEFDPNQBSJTPOTIUNM
  12. XFCQBDL ଞͷόϯυϥʔͱൺ΂ͯ XFCQBDLͱൺ΂Δͱͦ΋ͦ΋ͷ࡞Γ͕ҧ͏ XFCQBDL͸όϯυϧΛ࡞͔ͬͯΒ TFSWFSSFBEZʹͳΔ ରͯ͠ʜ 7JUF ͸·ͣ TFSWFSSFBEZʹͳΔɻ &4.PEVMF

    ͷ EZOBNJDJNQPSUΛར༻͢Δ͜ͱͰ େ͖ͳόϯυϧΛ࡞Βͳͯ͘ࡁΉ͔Β଎͍ɻ FTCVJME ͷύϫʔ΋आΓΔ͜ͱͰɺ&4.PEVMF ͷϏϧυ΋଎͍ɻ ˞ग़యɿIUUQTWJUFKTEFWHVJEFXIZIUNMTMPXTFSWFSTUBSU
  13. '"2

  14. WVFDMJͳ͔͚ͬͨͬʁ݁ہͲ͕ͬͪະདྷͳͷʁ 7JUF͕Πέ͍ͯΔͷ͸Θ͔ͬͨɺͰ΋ʜ 7VFKT "NTUFSEBNʹͯ &WBO:PV͕ݴ͍ͬͯͨΑ͏ʹ  ୹͍໨ͰݟΕ͹྆ํଘࡏ͢Δ  ௕͍໨Ͱݟͨ৔߹ɺ7JUF ͷ଎౓

    WVFDMJͷแׅతͳαϙʔτ ྆ํͷϝϦοτΛड͚͍ͨ ͱ͍͏͜ͱͷΑ͏ɻ ʢݸਓతͳߟ͑Ͱ͕͢ʣ ͱΓ͋͑ͣ͸޷͖ͳํΛ࢖͑͹͍͍ͷͰ͸ʁ ˞ग़యɿ IUUQTXXXZPVUVCFDPNXBUDI W&M+X$'KH
  15. WVFUTD ͬͯͳʹʁ ͖ͬ͞ݴͬͯͨʜ WVFUTD ͸ UTD WTDPEFWVFMBOHVBHFTFSWJDF Λ૊Έ߹Θͤͨ΋ͷ 7PMBS 74$PEF

    ֦ுػೳ ͷத਎Ͱ΋͋Δ WTDPEFWVFMBOHVBHFTFSWVJDF Ͱ͸ ςϯϓϨʔτ্ͷܕνΣοΫ΋ߦͬͯ͘ΕΔͷͰɺඇৗʹ։ൃମݧ͕ྑ͔ͬͨͰ͢ɻ