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. 15分で
    わかった気になるVite
    Amon Keishima
    2021.07.07

    View full-size slide

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

    View full-size slide

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

    "

    "

    "










    ※この発表が終わった後の
    みなさんのイメージ

    View full-size slide

  4. 7JUFͬͯͳʹ
    &WBO:PV 7VFKTͷ࡞ऀͰ͓ͳ͡Έ
    ͕࡞ͬͨ࣍ੈ୅ͷϑϩϯτΤϯυπʔϧ
    ϑϥϯεޠͰʮ଎͍ʯΛҙຯ͢Δ 7JUF WJU
    ໊͕લʹͳ͍ͬͯΔ

    View full-size slide

  5. ։ൃ࣌͸αʔόʔ ຊ൪Ϗϧυ࣌͸όϯυϥʔͱͯ͠ಈ͘
    ಛ௃
    7JUFͬͯͳʹ
    ։ൃ࣌ʹ͸ FTCVJME Λ࢖༻ͯ͠ߴ଎ʹґଘύοέʔδΛϏϧυ
    ϒϥ΢βͷ&4.PEVMFରԠΛ͏·͘ར༻ͨ͠ߴ଎ͳ։ൃମݧ
    &4.PEVMF &4.PEVMF EZOBNJDJNQPSUରԠϒϥ΢β͕λʔήοτ
    !WJUFKTQMVHJOMFHBDZΛ࢖͏͜ͱͰɺϨΨγʔϒϥ΢β޲͚ͷαϙʔτ͸Ͱ͖Δ
    ʢ7JUFࣗମͰ*&ͷαϙʔτ͸ߦ͑ΔͬΆ͍͕ɺ7VF͸*&Λαϙʔτ͠ͳ͍఺ʹ஫ҙʣ
    7VFҎ֎ͷϑϩϯτΤϯυϥΠϒϥϦʹ΋ରԠ
    3FBDU1SFBDU -JU&MFNFOU7BOJMMB+4ʹରԠ͍ͯ͠Δ

    View full-size slide

  6. %FQFOEFODZ1SFCVOEMJOH
    7JUF͸ԿΛ͍ͯ͠Δͷ
    ͱ͍͏Α͏ͳίʔυ͕͋Ε͹ɺ OPEF@NPEVMFTWJUF ͷԼʹ
    FTCVJME ͰϏϧυͨ͠ϑΝΠϧΛஔ͍ͯɺͦΕΛࢀরͤ͞Δػೳ
    ͜ͷͱ͖ $PNNPO+4 6.%ˠ &4.΁ͷม׵΋ඞཁʹԠͯ͡ߦ͏
    ˞ग़యɿIUUQTFTCVJMEHJUIVCJP
    import { chunk } from 'lodash-es';
    ˞ग़యɿ IUUQTWJUFKTEFWHVJEFEFQQSFCVOEMJOHIUNM

    View full-size slide

  7. %FQFOEFODZ1SFCVOEMJOH
    7JUF͸ԿΛ͍ͯ͠Δͷ

    View full-size slide

  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

    View full-size slide

  9. #BSFJNQPSUΛॻ͖׵͑Δ
    7JUF͸ԿΛ͍ͯ͠Δͷ

    View full-size slide

  10. )PU.PEVMF3FMPBE ).3

    7JUF͸Կ͕Ͱ͖Δͷ
    7VF4'$΁ͷαϙʔτͱ 3FBDU'BTU3FGSFTI΁ͷαϙʔτΛϑΝʔετύʔςΟͰߦ͍ͬͯΔ
    1SFBDU ΋αʔυύʔςΟͷ !QSFGSFTIWJUF Ͱαϙʔτ͍ͯ͠Δ
    ͱ͍͍ͭͭ΋ʜ
    OQN JOJU !WJUFKTBQQͰ࡞ΒΕͯͨ 7VF3FBDU1SFBDU 4WFMUFϓϩδΣΫτʹ͍ͭͯ͸
    ࠷ॳ͔Β).3͕αϙʔτ͞Εͨঢ়ଶͰ։ൃΛ࢝ΊΔ͜ͱ͕Ͱ͖Δ
    ஫IUUQTHJUIVCDPNWJUFKTWJUFUSFFNBJOQBDLBHFTDSFBUFBQQ Λݟͨײ͡ MJUFMFNFOUͱ WBOJMMB͸ະରԠ
    ˞ग़యɿ IUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMIPUNPEVMFSFQMBDFNFOU

    View full-size slide

  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

    View full-size slide

  12. 7VFͷαϙʔτ
    7JUF͸Կ͕Ͱ͖Δͷ
    7VF͸ 7JUF ͕ެࣜαϙʔτ͍ͯ͠Δ 4'$+49ڞʹ

    7VF΋ VOEFSGJOWJUFQMVHJOWVFΛ࢖͏͜ͱͰ 7JUF Λར༻Մೳ ).3΋͋ΔΑ

    ˞ग़యɿIUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMWVF

    View full-size slide

  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”
    ]
    )
    ˢ Ϗϧυ͞ΕͨίʔυͷҰ෦

    View full-size slide

  14. 1SFMPBE%JSFDUJWFT(FOFSBUJPO
    #VJMEͷ࠷దԽ
    7JUF͸Կ͕Ͱ͖Δͷ
    ॳظಡΈࠐΈ࣌ʹඞཁʹͳΔDIVOLʹରͯ͠ MJOLSFMlQSFMPBEzλάΛIUNMʹຒΊࠐΜͰ͘ΕΔ



    Vite App








    ˞ग़యɿIUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMQSFMPBEEJSFDUJWFTHFOFSBUJPO

    View full-size slide

  15. "TZOD$IVOL-PBEJOH0QUJNJ[BUJPO
    #VJMEͷ࠷దԽ
    7JUF͸Կ͕Ͱ͖Δͷ
    %ZOBNJDJNQPSUͰ JNQPSUͨ͠ ෳ਺ͷ DIVOL͔Β
    ͞Βʹڞ௨ͷ DIVOLʹରͯ͠ EJSFDUJNQPSUΛ͢Δέʔε
    $PNNPODIVOL$
    $IVOL"
    %ZOBNJDJNQPSU
    &OUSZ
    $IVOL#
    %JSFDUJNQPSU
    ͜ͷέʔεͰɺΑΓޮ཰ͷ͍͍νϟϯΫͷऔΓํΛ͢ΔΑ͏ʹίʔυΛ࠷దԽ͠·͢
    ˞ग़యɿIUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMBTZODDIVOLMPBEJOHPQUJNJ[BUJPO

    View full-size slide

  16. "TZOD$IVOL-PBEJOH0QUJNJ[BUJPO
    #VJMEͷ࠷దԽ
    7JUF͸Կ͕Ͱ͖Δͷ
    %FW
    1SPE

    View full-size slide

  17. 3PMMVQ༻ͷ1MVHJOΛαϙʔτ
    1MVHJO
    7JUF͸Կ͕Ͱ͖Δͷ
    7JUF ʹ͸ SPMMVQΛϕʔεʹͨ͠ϓϥάΠϯγεςϜ͕ଘࡏ͢Δɻ
    Ұൠతͳ 8FC։ൃͷ৔߹ 7JUF Ͱଟ͘ͷϢʔεέʔεΛΧόʔͰ͖Δ͜ͱ͔Β
    ϓϥάΠϯ͢Βඞཁͳ͍Αͱͭͭ͠΋ɺ3PMMVQ༻ͷ QMVHJOΛ࢖͏͜ͱ΋Ͱ͖Δ
    ˞ग़యɿIUUQTWJUFKTEFWHVJEFVTJOHQMVHJOTIUNM
    !SPMMVQQMVHJOFTMJOU ΛೖΕͯΈͨྫ

    View full-size slide

  18. .VMUJQBHF"QQͷαϙʔτ
    7JUF͸Կ͕Ͱ͖Δͷ
    .VMUJQBHF"QQͷߏ੒Ͱ΋ SPMMVQ0QUJPOT ʹ JOQVUΛ௥Ճ͢Δ͚ͩͰ0,
    ҎԼͷྫͷ৔߹ IUUQMPDBMIPTUOFTUFEJOEFYIUNM ͰΞΫηεͰ͖ΔΑ͏ʹͳΔ
    ˞ग़యɿIUUQTWJUFKTEFWHVJEFCVJMEIUNMNVMUJQBHFBQQ

    View full-size slide

  19. -JCSBSZ.PEFΛ࢖ͬͨϥΠϒϥϦ࡞੒ͷαϙʔτ
    7JUF͸Կ͕Ͱ͖Δͷ
    ϥΠϒϥϦΛ࡞Δͱ͖΋7JUF͸ศར
    JOEFYIUNM ͱ͔ͷ TSD σΟϨΫτϦ͸ EFNP΍ ϥΠϒϥϦ։ൃͷ؀ڥͱ͓͍ͯ࣋ͬͯͯ͠
    OQN SVOCVJME͢Δͱ ϥΠϒϥϦͷίʔυ͚͕ͩ EJTU ʹు͖ग़͞ΕΔ
    ˞ग़యɿIUUQTWJUFKTEFWHVJEFCVJMEIUNMMJCSBSZNPEF

    View full-size slide

  20. 4OPXQBDL
    ଞͷόϯυϥʔͱൺ΂ͯ
    ʮ&4.PEVMF ͕ϕʔεʹ͋Δʯ
    ʮ։ൃத͸όϯυϧ͠ͳ͍΋ͷΛ TFSWF͢ΔʯΈ͍ͨͳɺํ޲ੑ͸ࣅ͍ͯΔͬΆ͍
    7JUFT EFQFOEFODZQSFCVOEMJOHJTBMTPJOTQJSFECZ4OPXQBDLW
    ͱ͋ΔΑ͏ʹɺӨڹΛड͚͍ͯΔ෦෼΋͋ΔΑ͏ͩ
    ͍ΖΜͳόϯυϥʔͱʮ޿͘ઙ͘ʯͱ͍ͬͨҹ৅ͷ4OPXQBDLʹൺ΂ͯ
    7JUF ͸ 3PMMVQͱΨοπϦ JOUFHSBUFE͞Ε͍ͯΔͷͰɺ΍ΕΔ͜ͱ͕ଟ͍ͱݴΘΕ͍ͯΔ
    ʢݸਓతʹ͸ 'JSTUDMBTTͷ 7VF αϙʔτ͕σΧ͍ͱࢥͬͯ·͢ʂʣ
    ʢ͜ͷ͋ͱͷࡾ޷͞Μͷൃද΍ 6*5*OTJEFͰ΋ 4OPXQBDLʹ͍ͭͯ৮Ε͍ͯΔͷͰΑ͔ͬͨΒʜʣ
    ˞ग़యɿIUUQTWJUFKTEFWHVJEFDPNQBSJTPOTIUNM

    View full-size slide

  21. XFCQBDL
    ଞͷόϯυϥʔͱൺ΂ͯ
    XFCQBDLͱൺ΂Δͱͦ΋ͦ΋ͷ࡞Γ͕ҧ͏
    XFCQBDL͸όϯυϧΛ࡞͔ͬͯΒ TFSWFSSFBEZʹͳΔ
    ରͯ͠ʜ
    7JUF ͸·ͣ TFSWFSSFBEZʹͳΔɻ
    &4.PEVMF ͷ EZOBNJDJNQPSUΛར༻͢Δ͜ͱͰ
    େ͖ͳόϯυϧΛ࡞Βͳͯ͘ࡁΉ͔Β଎͍ɻ
    FTCVJME ͷύϫʔ΋आΓΔ͜ͱͰɺ&4.PEVMF ͷϏϧυ΋଎͍ɻ
    ˞ग़యɿIUUQTWJUFKTEFWHVJEFXIZIUNMTMPXTFSWFSTUBSU

    View full-size slide

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

    ˞ग़యɿIUUQTWJUFKTEFWHVJEFXIZIUNMXIZCVOEMFGPSQSPEVDUJPO

    View full-size slide

  23. ͳΜͰຊ൪޲͚΋FTCVJMEͰόϯυϧ͠ͳ͍ͷʁ
    ଎͍ͷ͸Θ͔ͬͨɺͰ΋ͳΜͰʜ
    ։ൃͰ࢖͏෼ʹ͸े෼଎͍͚Ͳɺ͍͔ͭ͘ͷόϯυϥͱͯ͠ॏཁͳػೳ͕8*1Ͱ͋Δɻ
    ʢྫʣDPEFTQMJUUJOHͱ͔ $44ͷϋϯυϦϯάͱ͔ɻ
    ͜ͷ͋ͨΓΛߟ͑Δͱ SPMMVQ͕͍͍ΑͶʂͬͯ͜ͱʹͳͬͨɻ
    ͨͩɺ͜Ε͸ͱΓ͋͑ͣࠓͷ͏ͪ͸ͬͯ͜ͱͰ͋ͬͯ
    কདྷతʹ FTCVJME ʹͳΔ͜ͱ΋͋Δ͔΋Ͷ తͳ͜ͱ͕υΩϡϝϯτͰॻ͔Ε͍ͯΔ
    ˞ग़యɿIUUQTWJUFKTEFWHVJEFXIZIUNMXIZOPUCVOEMFXJUIFTCVJME

    View full-size slide

  24. WVFDMJͳ͔͚ͬͨͬʁ݁ہͲ͕ͬͪະདྷͳͷʁ
    7JUF͕Πέ͍ͯΔͷ͸Θ͔ͬͨɺͰ΋ʜ
    7VFKT "NTUFSEBNʹͯ &WBO:PV͕ݴ͍ͬͯͨΑ͏ʹ
    ୹͍໨ͰݟΕ͹྆ํଘࡏ͢Δ
    ௕͍໨Ͱݟͨ৔߹ɺ7JUF ͷ଎౓ WVFDMJͷแׅతͳαϙʔτ ྆ํͷϝϦοτΛड͚͍ͨ
    ͱ͍͏͜ͱͷΑ͏ɻ
    ʢݸਓతͳߟ͑Ͱ͕͢ʣ
    ͱΓ͋͑ͣ͸޷͖ͳํΛ࢖͑͹͍͍ͷͰ͸ʁ
    ˞ग़యɿ IUUQTXXXZPVUVCFDPNXBUDI W&M+X$'KH

    View full-size slide

  25. WVFUTD ͬͯͳʹʁ
    ͖ͬ͞ݴͬͯͨʜ
    WVFUTD ͸ UTD WTDPEFWVFMBOHVBHFTFSWJDF Λ૊Έ߹Θͤͨ΋ͷ
    7PMBS 74$PEF ֦ுػೳ
    ͷத਎Ͱ΋͋Δ WTDPEFWVFMBOHVBHFTFSWVJDF Ͱ͸
    ςϯϓϨʔτ্ͷܕνΣοΫ΋ߦͬͯ͘ΕΔͷͰɺඇৗʹ։ൃମݧ͕ྑ͔ͬͨͰ͢ɻ

    View full-size slide

  26. WVFUTD ͬͯͳʹʁ
    ͖ͬ͞ݴͬͯͨʜ
    ͪͳΈʹʜ7FUVSͰ΋
    WFUVSWBMJEBUJPOUFNQMBUF1SPQT ΛΦϯʹ͢Δ͜ͱͰಉ༷ͷνΣοΫ͕Մೳ

    View full-size slide