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

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

1. 15分で わかった気になるVite Amon Keishima 2021.07.07
2. "NPO
   ,FJTIJNB -*/&
   (SPXUI
   5FDIOPMPHZ
   
   6*5
   
   5FBN -*/&ϙΠϯτΫϥϒͷ։ൃʹैࣄ 1FSGVNF͕͖͢Ͱ͢
3. IUUQTWJUFKTEFW
   Λϕʔεʹ Ұ෦ਂງΓͭͭ͠ ෼Ͱ7JUFΛΘ͔ͬͨؾʹͤͪ͞Ό͓͏ あ " そ " ゆ " こ と ね 完 全 に 理 解 し た ※この発表が終わった後の みなさんのイメージ
4. 7JUFͬͯͳʹ &WBO
   :PV
   7VFKTͷ࡞ऀͰ͓ͳ͡Έ
   ͕࡞ͬͨ࣍ੈ୅ͷϑϩϯτΤϯυπʔϧ ϑϥϯεޠͰʮ଎͍ʯΛҙຯ͢Δ 7JUF WJU
   ໊͕લʹͳ͍ͬͯΔ
5. ։ൃ࣌͸αʔόʔ 
   ຊ൪Ϗϧυ࣌͸όϯυϥʔͱͯ͠ಈ͘ ಛ௃ 7JUFͬͯͳʹ ։ൃ࣌ʹ͸ FTCVJME Λ࢖༻ͯ͠ߴ଎ʹґଘύοέʔδΛϏϧυ ϒϥ΢βͷ&4.PEVMFରԠΛ͏·͘ར༻ͨ͠ߴ଎ͳ։ൃମݧ &4.PEVMF 
   &4.PEVMF EZOBNJD
   JNQPSU
   ରԠϒϥ΢β͕λʔήοτ !WJUFKTQMVHJOMFHBDZ
   Λ࢖͏͜ͱͰɺϨΨγʔϒϥ΢β޲͚ͷαϙʔτ͸Ͱ͖Δ ʢ7JUFࣗମͰ*&ͷαϙʔτ͸ߦ͑ΔͬΆ͍͕ɺ7VF͸*&Λαϙʔτ͠ͳ͍఺ʹ஫ҙʣ 7VFҎ֎ͷϑϩϯτΤϯυϥΠϒϥϦʹ΋ରԠ 3FBDU
   
   1SFBDU 
   -JU
   &MFNFOU
   
   7BOJMMB
   +4
   ʹରԠ͍ͯ͠Δ
6. %FQFOEFODZ
   1SFCVOEMJOH 7JUF͸ԿΛ͍ͯ͠Δͷ ͱ͍͏Α͏ͳίʔυ͕͋Ε͹ɺ OPEF@NPEVMFTWJUF ͷԼʹ FTCVJME ͰϏϧυͨ͠ϑΝΠϧΛஔ͍ͯɺͦΕΛࢀরͤ͞Δػೳ ͜ͷͱ͖ $PNNPO+4 
   6.%
   ˠ &4.
   ΁ͷม׵΋ඞཁʹԠͯ͡ߦ͏ ˞ग़యɿIUUQTFTCVJMEHJUIVCJP import { chunk } from 'lodash-es'; ˞ग़యɿ IUUQTWJUFKTEFWHVJEFEFQQSFCVOEMJOHIUNM
7. %FQFOEFODZ
   1SFCVOEMJOH 7JUF͸ԿΛ͍ͯ͠Δͷ
8. #BSF
   NPEVMF
   JNQPSU
   Λॻ͖׵͑Δ 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
9. #BSF
   JNQPSU
   Λॻ͖׵͑Δ 7JUF͸ԿΛ͍ͯ͠Δͷ
10. )PU
    .PEVMF
    3FMPBE
    ).3 7JUF͸Կ͕Ͱ͖Δͷ 7VF
    4'$
    ΁ͷαϙʔτͱ 3FBDU
    'BTU
    3FGSFTI
    ΁ͷαϙʔτΛϑΝʔετύʔςΟͰߦ͍ͬͯΔ 1SFBDU ΋αʔυύʔςΟͷ !QSFGSFTIWJUF Ͱαϙʔτ͍ͯ͠Δ ͱ͍͍ͭͭ΋ʜ OQN JOJU !WJUFKTBQQ
    Ͱ࡞ΒΕͯͨ 7VF
    
    3FBDU
    
    1SFBDU 
    4WFMUF
    ϓϩδΣΫτʹ͍ͭͯ͸ ࠷ॳ͔Β).3͕αϙʔτ͞Εͨঢ়ଶͰ։ൃΛ࢝ΊΔ͜ͱ͕Ͱ͖Δ ஫
    IUUQTHJUIVCDPNWJUFKTWJUFUSFFNBJOQBDLBHFTDSFBUFBQQ Λݟͨײ͡ MJUFMFNFOU
    ͱ WBOJMMB
    ͸ະରԠ ˞ग़యɿ IUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMIPUNPEVMFSFQMBDFNFOU
11. 5ZQF4DSJQUͷτϥϯεύΠϧ 7JUF͸Կ͕Ͱ͖Δͷ 5ZQF4DSJQU͸࠷ॳ͔ΒରԠࡁΈɻͨͩ͠ɺܕνΣοΫΛߦΘͣτϥϯεύΠϧ͚ͩߦ͏ɻ ΈΜͳ74$PEFͳΓɺ*OUFMMJ+ͳΓɺΤσΟλࣗ਎͕54ͷܕνΣοΫͰ͖Δ؀ڥͰॻ͍ͯΔΑͶʁ ͱ͍͏͜ͱͬΆ͍ FTCVJME ͕ 54
    ͷτϥϯεύΠϧΛߦ͏͕ɺUTD ʹൺ΂ͯഒ଎͍Β͍͠ ҰԠ੒໿΋͋ͬͯɺDPOTU
    FOVN ͱ͔ JNQMJDJU
    UZQFPOMZ
    JNQPSUT
    ͸࢖͑ͳ͍ͱ͍ͯ͠Δ Λ͢Δ͜ͱΛਪ঑͞Ε͍ͯΔ λʔϛφϧ΍$*؀ڥͳͲͰܕνΣοΫ௨Βͳ͔ͬͨΒΤϥʔʹ͢Δʜͱ͔΍Γ͚ͨΕ͹ Λ࢖͑͹0, tsc --noEmit // or vue-tsc --noEmit ˞
    WVFUTD ʹ͍ͭͯ͸࠷ޙʹ৮Ε·͢ compilerOptions.isolatedModules = true ˞ग़యɿ IUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMUZQFTDSJQU
12. 7VFͷαϙʔτ 7JUF͸Կ͕Ͱ͖Δͷ 7VF
    ͸ 7JUF ͕ެࣜαϙʔτ͍ͯ͠Δ 4'$
    
    +49ڞʹ 7VF
    ΋ VOEFSGJOWJUFQMVHJOWVF
    Λ࢖͏͜ͱͰ 7JUF Λར༻Մೳ ).3΋͋ΔΑ ˞ग़యɿIUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMWVF
13. $44
    $PEF
    4QMJUUJOH #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ '06$ 'MBTI
    PG
    VOTUZMFE DPOUFOU
    Λ๷͙ͨΊɺEZOBNJD
    JNQPSU
    ͰಡΈࠐΉ 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” ] ) ˢ Ϗϧυ͞ΕͨίʔυͷҰ෦
14. 1SFMPBE
    %JSFDUJWFT
    (FOFSBUJPO #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ ॳظಡΈࠐΈ࣌ʹඞཁʹͳΔDIVOLʹରͯ͠ MJOL
    SFMlQSFMPBEz
    λάΛ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
15. "TZOD
    $IVOL
    -PBEJOH
    0QUJNJ[BUJPO #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ %ZOBNJD
    JNQPSU
    Ͱ JNQPSU
    ͨ͠ ෳ਺ͷ DIVOL
    ͔Β ͞Βʹڞ௨ͷ DIVOL
    ʹରͯ͠ EJSFDU
    JNQPSU
    Λ͢Δέʔε $PNNPO
    DIVOL
    $ $IVOL
    " %ZOBNJD
    JNQPSU &OUSZ $IVOL
    # %JSFDU
    JNQPSU ͜ͷέʔεͰɺΑΓޮ཰ͷ͍͍νϟϯΫͷऔΓํΛ͢ΔΑ͏ʹίʔυΛ࠷దԽ͠·͢ ˞ग़యɿIUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMBTZODDIVOLMPBEJOHPQUJNJ[BUJPO
16. "TZOD
    $IVOL
    -PBEJOH
    0QUJNJ[BUJPO #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ %FW 1SPE
17. 3PMMVQ༻ͷ1MVHJOΛαϙʔτ 1MVHJO 7JUF͸Կ͕Ͱ͖Δͷ 7JUF ʹ͸ SPMMVQ
    Λϕʔεʹͨ͠ϓϥάΠϯγεςϜ͕ଘࡏ͢Δɻ Ұൠతͳ 8FC
    ։ൃͷ৔߹ 7JUF Ͱଟ͘ͷϢʔεέʔεΛΧόʔͰ͖Δ͜ͱ͔Β ϓϥάΠϯ͢Βඞཁͳ͍Αͱͭͭ͠΋ɺ3PMMVQ
    ༻ͷ QMVHJO
    Λ࢖͏͜ͱ΋Ͱ͖Δ ˞ग़యɿIUUQTWJUFKTEFWHVJEFVTJOHQMVHJOTIUNM !SPMMVQQMVHJOFTMJOU ΛೖΕͯΈͨྫ
18. .VMUJQBHF
    "QQ
    ͷαϙʔτ 7JUF͸Կ͕Ͱ͖Δͷ .VMUJQBHF
    "QQͷߏ੒Ͱ΋ SPMMVQ0QUJPOT ʹ JOQVU
    Λ௥Ճ͢Δ͚ͩͰ0, ҎԼͷྫͷ৔߹ IUUQMPDBMIPTUOFTUFEJOEFYIUNM ͰΞΫηεͰ͖ΔΑ͏ʹͳΔ ˞ग़యɿIUUQTWJUFKTEFWHVJEFCVJMEIUNMNVMUJQBHFBQQ
19. -JCSBSZ
    .PEFΛ࢖ͬͨϥΠϒϥϦ࡞੒ͷαϙʔτ 7JUF͸Կ͕Ͱ͖Δͷ ϥΠϒϥϦΛ࡞Δͱ͖΋7JUF͸ศར JOEFYIUNM ͱ͔ͷ TSD σΟϨΫτϦ͸ EFNP
    ΍ ϥΠϒϥϦ։ൃͷ؀ڥͱ͓͍ͯ࣋ͬͯͯ͠ OQN SVO
    CVJME
    ͢Δͱ ϥΠϒϥϦͷίʔυ͚͕ͩ EJTU ʹు͖ग़͞ΕΔ ˞ग़యɿIUUQTWJUFKTEFWHVJEFCVJMEIUNMMJCSBSZNPEF
20. 4OPXQBDL ଞͷόϯυϥʔͱൺ΂ͯ ʮ&4.PEVMF ͕ϕʔεʹ͋Δʯ ʮ։ൃத͸όϯυϧ͠ͳ͍΋ͷΛ TFSWF
    ͢ΔʯΈ͍ͨͳɺํ޲ੑ͸ࣅ͍ͯΔͬΆ͍ 
    7JUFT EFQFOEFODZ
    QSFCVOEMJOH
    JT
    BMTP
    JOTQJSFE
    CZ
    4OPXQBDL
    W ͱ͋ΔΑ͏ʹɺӨڹΛड͚͍ͯΔ෦෼΋͋ΔΑ͏ͩ ͍ΖΜͳόϯυϥʔͱʮ޿͘ઙ͘ʯͱ͍ͬͨҹ৅ͷ4OPXQBDLʹൺ΂ͯ 7JUF ͸ 3PMMVQ
    ͱΨοπϦ JOUFHSBUFE
    ͞Ε͍ͯΔͷͰɺ΍ΕΔ͜ͱ͕ଟ͍ͱݴΘΕ͍ͯΔ ʢݸਓతʹ͸ 'JSTUDMBTT
    ͷ 7VF αϙʔτ͕σΧ͍ͱࢥͬͯ·͢ʂʣ ʢ͜ͷ͋ͱͷࡾ޷͞Μͷൃද΍ 6*5
    *OTJEF
    Ͱ΋ 4OPXQBDL
    ʹ͍ͭͯ৮Ε͍ͯΔͷͰΑ͔ͬͨΒʜʣ ˞ग़యɿIUUQTWJUFKTEFWHVJEFDPNQBSJTPOTIUNM
21. XFCQBDL ଞͷόϯυϥʔͱൺ΂ͯ XFCQBDL
    ͱൺ΂Δͱͦ΋ͦ΋ͷ࡞Γ͕ҧ͏ XFCQBDL
    ͸όϯυϧΛ࡞͔ͬͯΒ TFSWFS
    SFBEZ
    ʹͳΔ ରͯ͠ʜ 7JUF ͸·ͣ TFSWFS
    SFBEZ
    ʹͳΔɻ &4.PEVMF ͷ EZOBNJD
    JNQPSU
    Λར༻͢Δ͜ͱͰ େ͖ͳόϯυϧΛ࡞Βͳͯ͘ࡁΉ͔Β଎͍ɻ FTCVJME ͷύϫʔ΋आΓΔ͜ͱͰɺ&4.PEVMF ͷϏϧυ΋଎͍ɻ ˞ग़యɿIUUQTWJUFKTEFWHVJEFXIZIUNMTMPXTFSWFSTUBSU
22. '"2
23. ຊจλΠτϧ ຊ൪޲͚ʹ͸όϯυϧ࡞ͬͯΔͷʁ&4.PEVMF࢖Θͳ͍ͷʁ ଎͍ͷ͸Θ͔ͬͨɺͰ΋ͳΜͰʜ &4.͕ଟ͘ͷϒϥ΢βͰαϙʔτ͞ΕΔΑ͏ʹͳͬͨ΋ͷͷ όϯυϧ͞Ε͍ͯͳ͍&4.͸·ͩඇޮ཰ͳ໘΋͋ΔͨΊɻ  ࠷దԽ͞Εͨίʔυ͸΍ͬͺΓڧ͍  USFFTIBLJOH  MB[ZMPBEJOH  DPNNPO
    DIVOL
    TQMJUUJOH
    Ωϟογϡ໘Ͱڧ͍ ˞ग़యɿIUUQTWJUFKTEFWHVJEFXIZIUNMXIZCVOEMFGPSQSPEVDUJPO
24. ͳΜͰຊ൪޲͚΋FTCVJMEͰόϯυϧ͠ͳ͍ͷʁ ଎͍ͷ͸Θ͔ͬͨɺͰ΋ͳΜͰʜ ։ൃͰ࢖͏෼ʹ͸े෼଎͍͚Ͳɺ͍͔ͭ͘ͷόϯυϥͱͯ͠ॏཁͳػೳ͕8*1Ͱ͋Δɻ ʢྫʣDPEFTQMJUUJOH
    ͱ͔ $44
    ͷϋϯυϦϯάͱ͔ɻ ͜ͷ͋ͨΓΛߟ͑Δͱ SPMMVQ
    ͕͍͍ΑͶʂͬͯ͜ͱʹͳͬͨɻ ͨͩɺ͜Ε͸ͱΓ͋͑ͣࠓͷ͏ͪ͸ͬͯ͜ͱͰ͋ͬͯ কདྷతʹ FTCVJME ʹͳΔ͜ͱ΋͋Δ͔΋Ͷ తͳ͜ͱ͕υΩϡϝϯτͰॻ͔Ε͍ͯΔ ˞ग़యɿIUUQTWJUFKTEFWHVJEFXIZIUNMXIZOPUCVOEMFXJUIFTCVJME
25. WVFDMJ
    ͳ͔͚ͬͨͬʁ݁ہͲ͕ͬͪະདྷͳͷʁ 7JUF͕Πέ͍ͯΔͷ͸Θ͔ͬͨɺͰ΋ʜ 7VFKT "NTUFSEBN
    ʹͯ &WBO
    :PV
    ͕ݴ͍ͬͯͨΑ͏ʹ  ୹͍໨ͰݟΕ͹྆ํଘࡏ͢Δ  ௕͍໨Ͱݟͨ৔߹ɺ7JUF ͷ଎౓
    WVFDMJ
    ͷแׅతͳαϙʔτ ྆ํͷϝϦοτΛड͚͍ͨ ͱ͍͏͜ͱͷΑ͏ɻ ʢݸਓతͳߟ͑Ͱ͕͢ʣ ͱΓ͋͑ͣ͸޷͖ͳํΛ࢖͑͹͍͍ͷͰ͸ʁ ˞ग़యɿ IUUQTXXXZPVUVCFDPNXBUDI W&M+X$'KH
    
26. WVFUTD ͬͯͳʹʁ ͖ͬ͞ݴͬͯͨʜ WVFUTD ͸ UTD
    WTDPEFWVFMBOHVBHFTFSWJDF Λ૊Έ߹Θͤͨ΋ͷ 7PMBS
    74$PEF ֦ுػೳ
    ͷத਎Ͱ΋͋Δ WTDPEFWVFMBOHVBHFTFSWVJDF Ͱ͸ ςϯϓϨʔτ্ͷܕνΣοΫ΋ߦͬͯ͘ΕΔͷͰɺඇৗʹ։ൃମݧ͕ྑ͔ͬͨͰ͢ɻ
27. WVFUTD ͬͯͳʹʁ ͖ͬ͞ݴͬͯͨʜ ͪͳΈʹʜ
    7FUVSͰ΋ WFUVSWBMJEBUJPOUFNQMBUF1SPQT ΛΦϯʹ͢Δ͜ͱͰಉ༷ͷνΣοΫ͕Մೳ
28. THANK YOU