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/

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers
PRO

July 07, 2021
Tweet

Transcript

  1. 15分で わかった気になるVite Amon Keishima 2021.07.07

  2. "NPO,FJTIJNB -*/&(SPXUI5FDIOPMPHZ6*55FBN -*/&ϙΠϯτΫϥϒͷ։ൃʹैࣄ 1FSGVNF͕͖͢Ͱ͢

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

    と ね 完 全 に 理 解 し た ※この発表が終わった後の みなさんのイメージ
  4. 7JUFͬͯͳʹ &WBO:PV 7VFKTͷ࡞ऀͰ͓ͳ͡Έ ͕࡞ͬͨ࣍ੈ୅ͷϑϩϯτΤϯυπʔϧ ϑϥϯεޠͰʮ଎͍ʯΛҙຯ͢Δ 7JUF WJU ໊͕લʹͳ͍ͬͯΔ

  5. ։ൃ࣌͸αʔόʔ ຊ൪Ϗϧυ࣌͸όϯυϥʔͱͯ͠ಈ͘ ಛ௃ 7JUFͬͯͳʹ ։ൃ࣌ʹ͸ FTCVJME Λ࢖༻ͯ͠ߴ଎ʹґଘύοέʔδΛϏϧυ ϒϥ΢βͷ&4.PEVMFରԠΛ͏·͘ར༻ͨ͠ߴ଎ͳ։ൃମݧ &4.PEVMF &4.PEVMF

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

    &4.΁ͷม׵΋ඞཁʹԠͯ͡ߦ͏ ˞ग़యɿIUUQTFTCVJMEHJUIVCJP import { chunk } from 'lodash-es'; ˞ग़యɿ IUUQTWJUFKTEFWHVJEFEFQQSFCVOEMJOHIUNM
  7. %FQFOEFODZ1SFCVOEMJOH 7JUF͸ԿΛ͍ͯ͠Δͷ

  8. #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
  9. #BSFJNQPSUΛॻ͖׵͑Δ 7JUF͸ԿΛ͍ͯ͠Δͷ

  10. )PU.PEVMF3FMPBE ).3 7JUF͸Կ͕Ͱ͖Δͷ 7VF4'$΁ͷαϙʔτͱ 3FBDU'BTU3FGSFTI΁ͷαϙʔτΛϑΝʔετύʔςΟͰߦ͍ͬͯΔ 1SFBDU ΋αʔυύʔςΟͷ !QSFGSFTIWJUF Ͱαϙʔτ͍ͯ͠Δ ͱ͍͍ͭͭ΋ʜ

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

    ͱ͔ JNQMJDJUUZQFPOMZJNQPSUT͸࢖͑ͳ͍ͱ͍ͯ͠Δ Λ͢Δ͜ͱΛਪ঑͞Ε͍ͯΔ λʔϛφϧ΍$*؀ڥͳͲͰܕνΣοΫ௨Βͳ͔ͬͨΒΤϥʔʹ͢Δʜͱ͔΍Γ͚ͨΕ͹ Λ࢖͑͹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$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” ] ) ˢ Ϗϧυ͞ΕͨίʔυͷҰ෦
  14. 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
  15. "TZOD$IVOL-PBEJOH0QUJNJ[BUJPO #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ %ZOBNJDJNQPSUͰ JNQPSUͨ͠ ෳ਺ͷ DIVOL͔Β ͞Βʹڞ௨ͷ DIVOLʹରͯ͠ EJSFDUJNQPSUΛ͢Δέʔε

    $PNNPODIVOL$ $IVOL" %ZOBNJDJNQPSU &OUSZ $IVOL# %JSFDUJNQPSU ͜ͷέʔεͰɺΑΓޮ཰ͷ͍͍νϟϯΫͷऔΓํΛ͢ΔΑ͏ʹίʔυΛ࠷దԽ͠·͢ ˞ग़యɿIUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMBTZODDIVOLMPBEJOHPQUJNJ[BUJPO
  16. "TZOD$IVOL-PBEJOH0QUJNJ[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

    SVOCVJME͢Δͱ ϥΠϒϥϦͷίʔυ͚͕ͩ EJTU ʹు͖ग़͞ΕΔ ˞ग़యɿIUUQTWJUFKTEFWHVJEFCVJMEIUNMMJCSBSZNPEF
  20. 4OPXQBDL ଞͷόϯυϥʔͱൺ΂ͯ ʮ&4.PEVMF ͕ϕʔεʹ͋Δʯ ʮ։ൃத͸όϯυϧ͠ͳ͍΋ͷΛ TFSWF͢ΔʯΈ͍ͨͳɺํ޲ੑ͸ࣅ͍ͯΔͬΆ͍ 7JUFT EFQFOEFODZQSFCVOEMJOHJTBMTPJOTQJSFECZ4OPXQBDLW ͱ͋ΔΑ͏ʹɺӨڹΛड͚͍ͯΔ෦෼΋͋ΔΑ͏ͩ ͍ΖΜͳόϯυϥʔͱʮ޿͘ઙ͘ʯͱ͍ͬͨҹ৅ͷ4OPXQBDLʹൺ΂ͯ

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

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

  23. ຊจλΠτϧ ຊ൪޲͚ʹ͸όϯυϧ࡞ͬͯΔͷʁ&4.PEVMF࢖Θͳ͍ͷʁ ଎͍ͷ͸Θ͔ͬͨɺͰ΋ͳΜͰʜ &4.͕ଟ͘ͷϒϥ΢βͰαϙʔτ͞ΕΔΑ͏ʹͳͬͨ΋ͷͷ όϯυϧ͞Ε͍ͯͳ͍&4.͸·ͩඇޮ཰ͳ໘΋͋ΔͨΊɻ  ࠷దԽ͞Εͨίʔυ͸΍ͬͺΓڧ͍  USFFTIBLJOH 

    MB[ZMPBEJOH  DPNNPODIVOLTQMJUUJOH Ωϟογϡ໘Ͱڧ͍ ˞ग़యɿ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