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

Vue & Vite Rustify

kazupon
December 04, 2023

Vue & Vite Rustify

kazupon

December 04, 2023
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. Vue & Vite Rustify Vue Fes Japan 2023 After Meetup

    2023-11-07 (ϝυϐΞגࣜձࣾ x MNTSQגࣜձࣾ x גࣜձࣾ hacomono) 2023-12-03 (FukuokaJS x LINEϠϑʔίϛϡχέʔγϣϯζגࣜձࣾ) @kazupon
  2. PLAID, inc. 
 Vue.js Japan User Group Organizer Vue.js Core

    Team Member Nuxt Community team Creator of Vue I18n & Intlify Maintainer of Nuxt I18n @kazu_pon kazupon kazupon
  3. ΞδΣϯμ • Vue Fes Japan 2023 ͷৼΓฦΓ • Rolldown •

    ίϥϘϨʔγϣϯ͍ͯ͠ΔRspack νʔϜͱOSS • Oxc • πʔϧνΣΠϯͷಈ޲ • Vue ʹ Rust ͷ೾͸΍ͬͯ͘Δʁ
  4. State of Vue Fes Japan 2023 • શࢀՃऀ਺: 583 ໊

    • ηογϣϯ: 33 (ຊηογϣϯ + LTηογϣϯ) • εϙϯαʔ਺: 46 • ݸਓεϙϯαʔ਺: 44 ໊ • ΞϑλʔύʔςΟʔࢀՃऀ਺: 300 ໊ (ຬ੮)
  5. Πϕϯτ & ࠵͠෺ • ϋϯζΦϯ • ύωϧςΟΧογϣϯ • Vue.js ΫϦχοΫ

    (Q & A) • ΫϦΤΠςΟϒ΢Υʔϧ • Vue Fes Store (άοζ) • ελϯϓϥϦʔ & λτΡʔ
  6. Ωʔϊʔτલ൒ • Vue 2 ͔Β Vue 3 ͷҠߦͷৼΓฦΓ • ؒҧ͍͔ΒͷֶͼɺऔΓ૊Μͩ͜ͱͦͯ͠͏·͘

    ͍ͬͨ͜ͱʹ͍ͭͯ࿩ͨ͠ ؒҧ͍ͱֶͼɺͦͯ͠͏·͍ͬͨ͘͜ͱͷέʔεͷҰྫ
  7. Ωʔϊʔτલ൒ • Vue ͷࠓޙʹ͍ͭͯ • Vue 3.4 alpha • computed

    property ͷվળ • Reactivity Transform ͷ࡟আ • TSͷܕपΓͷվળ • …ͳͲ
  8. Ωʔϊʔτલ൒ • Vue ͷࠓޙʹ͍ͭͯ • Vue 3.5 ͷϩʔυϚοϓ • SSR

    पΓ (Suspence / Lazy hydration) ͷվળ • Custom Elements (Web Components) ͷվળ • … ͳͲ • Vapor Ϟʔυ • virtual dom Λ࢖Θͳ͍ runtime-less ͳ৽͍͠ίϯύΠϧϞʔυ • 2024೥ 1Q / 2Q ༧ఆ
  9. Ωʔϊʔτޙ൒ • Vite ͷࠓޙʹ͍ͭͯ • Vite ͷ՝୊Λղܾ͢ΔͨΊʹ Rust Խʹ஫ྗ͍ͯ͠ ͘ͱݴٴ

    • Rolldown • Rust ʹΑͬͯωΠςΟϒ࣮૷͞Εͨ Rollup ޓ׵ ͷόϯυϥʔ • Vite ͷ Rust Խ΋ϩʔυϚοϓʹैͬͯஈ֊తʹ ߦ͍ͬͯ͘
  10. Rolldownͱ͸ • Vite ಺෦Ͱ࢖͍ͬͯΔ Rollup Λ Rust Խͨ͠΋ͷ • ໨త:

    
 Rollup ͱͳΔ΂͘ಉ͡ڍಈʹͳΔΑ͏ޓ׵ੑΛҡ࣋ ͭͭ͠ϏϧυύϑΥʔϚϯεΛఏڙ͢Δ • ΰʔϧ: 
 Vite Λ࢖͏Ϣʔβʔʹ͸࠷খݶͷӨڹͰ Rollup Λ ஔ͖׵͑Δ
  11. Vite ๊͕͑Δ՝୊Λղܾ͍ͨ͠ • production Ϗϧυ͕஗͍ • development ͱ production ͱͷόϯυϧͷҰ؏ੑ

    • development ʹ͓͍ͯൃੜ͢ΔωοτϫʔΫΦʔ όʔϔου • νϟϯΫ෼ׂ (code chunk split) ੍ޚʹ੍ݶ͕͋Δ • ϞδϡʔϧϑΣσϨʔγϣϯ͕ͳ͍
  12. Vite ๊͕͑Δ՝୊Λղܾ͍ͨ͠ • production Ϗϧυ͕஗͍ • development ͱ production ͱͷόϯυϧͷҰ؏ੑ

    • development ʹ͓͍ͯൃੜ͢ΔωοτϫʔΫΦʔ όʔϔου • νϟϯΫ෼ׂ (code chunk split) ੍ޚʹ੍ݶ͕͋Δ • ϞδϡʔϧϑΣσϨʔγϣϯ͕ͳ͍
  13. production Ϗϧυ͕஗͍ • Rollup ͸ JS ࣮૷Ͱ΋଎͍ • ͨͩɺJS ͸γϯάϧεϨουɺΠϕϯτۦಈ

    • όϯυϧ͸ CPU ϔϏʔ • όϯυϧ͢Δྔ͕ଟ͘ͳͬͯ͘ΔͱɺJS ͷ parse ɺtransformɺmi fi nifyɺsource-mapͱ͍ͬͨ ॲཧ͕ελοΫͯ͠͠·͍஗͘ͳΔ
  14. development ͱ production ͱͷόϯυϧҰ؏ੑ • development Ͱ͸ esbuild ͕࢖ΘΕΔ •

    naitive & ϚϧνεϨουʹΑΓϏϧυ͸଎͍ʂ • asset ࠷దԽपΓͷ੍ޚʹ੍ݶ͕͋Δ • Plugin API ͕ॊೈͰ͸ͳ͍
  15. development ͱ production ͱͷόϯυϧҰ؏ੑ • production Ͱ͸ Rollup Λ࢖ͬͯόϯυϧ͢Δ •

    Plugin API ͸ॊೈ! ͢΂ͯJavaScript! • ESM/CJS ޓ׵ΛվળͰ͖Δ • ͨͩ esbuild ͱൺ΂Δͱ஗͍
  16. development ͱ production ͱͷόϯυϧҰ؏ੑ • production Ͱ͸ Rollup Λ࢖ͬͯόϯυϧ͢Δ •

    Plugin API ͸ॊೈ! ͢΂ͯJavaScript! • ESM/CJS ޓ׵ΛվળͰ͖Δ • ͨͩ esbuild ͱൺ΂Δͱ஗͍ ͦΕͧΕͷ௕ॴΛར༻͍ͯ͠ΔͨΊɺesbuild΋͘͠͸ଞͷ navite bundlerʹϦϓϨʔεͰ͖ͳ͍...
  17. Rolldown ։ൃঢ়گ • status: • εςʔδ1: 
 (Vue Fes 2023

    Ͱݴٴͨ͠ϩʔυϚοϓͷ 1/4) 
 
 
 
 
 • Rspack νʔϜͦͯ͠ Rollup ͷίΞϝϯςφͱ͍ͬ ͠ΐʹίϥϘϨʔγϣϯ͠ͳ͕Β։ൃ͍ͯ͠Δ
  18. Rolldown ϨϙδτϦ • GitHub organization 
 https://github.com/rolldown-rs • ݱࡏ private

    repo Ͱ։ൃத • JS / TS parser ͸ Rust ੡ Oxc • magic-string ͷ Rust ൛ string_wizard ͸ public ʹ ఏڙ͞Ε͍ͯΔ 
 https://github.com/rolldown-rs/string_wizard
  19. Webpack ͷޓ׵ੑ & ૬ޓӡ༻ੑ͸Ͳͷ͙Β͍͔ • babel-loaderɺless-loaderɺsass-loader ͱ͍ͬͨ Webpack Ͱ࢖ΘΕ͍ͯΔجຊతͳ Loader

    ͸αϙʔτ 
 https://www.rspack.dev/guide/loader-compat.html 
 • Webpack ͕ఏڙ͍ͯ͠ΔϓϥάΠϯ΋αϙʔτ 
 https://www.rspack.dev/guide/plugin-compat.html
  20. Oxc

  21. The Oxidation Compiler • JavaScript / TypeScript ޲͚ͷϋΠύϑΥʔϚϯεͷπʔϧ܊ Λ Rust

    Ͱ࣮૷ͨ͠΋ͷΛఏڙ͢ΔΦʔϓϯιʔεϓϩδΣΫτ • parser • linter • formatter • transpiler • mini fi er • type checker https://github.com/oxc-project/oxc ࡞ऀ͸ Bytedance ͷ Rspack νʔϜͷਓ
  22. ࢥ૝ • Biome (چ: Rome) ΍ Ruff ͱಉ͡ • Biome:

    https://biomejs.dev/blog/annoucing-biome Oxc ΋πʔϧνΣΠϯΛ౷߹ͯ͠རศੑΛఏڙ͢Δ https://oxc-project.github.io/docs/guide/introduction.html
  23. Biome ͱͷҧ͍ • Biome • JS / TS ͚ͩͰͳ͘ Web

    ։ൃʹؔ͢Δݴޠશൠ޲͚ ͷπʔϧνΣΠϯ • ઃఆΛۃྗݮΒ͠ɺσϑΥϧτϕʔεͳπʔϧΛ૝ఆ • Oxc • JS / TS ޲͚ͷπʔϧνΣΠϯͱͯ͠ϑΥʔΧε • πʔϧΛ֦ுͰ͖Δ͜ͱΛ૝ఆ https://zenn.dev/cybozu_frontend/articles/thinking-about-oxc
  24. Oxc ͸ crate Λఏڙ͍ͯ͠Δ • ͍͔ͭ͘ఏڙ͍ͯ͠Δ crate Λར༻͢Δ͜ͱͰࣗ෼ ͰπʔϧνΣʔϯΛ࡞Δ͜ͱ΋Ͱ͖Δ •

    oxc_ast: 
 estree like ͳ AST ޲͚ͷϥΠϒϥϦ • oxc_parser: 
 JS / TS parser ϥΠϒϥϦ • And etc …
  25. Oxc ͷݱঢ় https://github.com/oxc-project/oxc/issues/481 • ݱঢ় Linter ʹϑΥʔΧε͠ ͍ͯΔ໛༷ • Lintͷϧʔϧ͸ɺΑ͘࢖ΘΕ

    ͍ͯΔ ESLint / typescript- eslint ͷ recommended ϧʔ ϧΛఏڙ͢Δ༧ఆ • ϓϥάΠϯΞʔΩςΫνϟ ͸ɺGraphQL αϒηοτʹ ͍ۙ Trustfall Λ࠾༻͢Δ༧ ఆ
  26. ଞͷπʔϧঢ়گ • Mini fi er • WIP: ϓϩτλΠϐϯάத • Transpiler

    • WIP: https://github.com/web-infra-dev/oxc/issues/974 • Formatter • Ϧιʔε͕଍Γͳͯ͘ख͕͚͍ͭͯͳ͍ঢ়گ • Type Checker • Ezno Λ࢖͍ͬͯΔ͕·ͩ experimental
  27. • Rust ͳͲͷݴޠʹΑΔωΟςΟϒԽʹΑΔஔ׵͑ • Parser • Bundler • Formatter •

    Linter • Loader • … and etc ࠷ۙͷ JavaScript πʔϧք۾ͷτϨϯυ
  28. ͪͳΈʹ Rollup v4 Ͱ΋ۤઓ͍ͯ͠Δ • JS parser ͸ Acorn ͔Β

    SWC ʹஔ׵͕͑ͨɺॳظ ࣮૷Ͱ͸͋·ΓύϑΥʔϚϯε͕Ͱ͍ͯͳͬͨ https://github.com/rollup/rollup/issues/5182
  29. Rollup v4 ࠷৽൛Ͱ͸ύϑΥʔϚϯε͸վળ͍ͯ͠Δ • ϝϞϦΞϩέʔλʔͷ࠷దԽ 
 https://github.com/rollup/rollup/pull/5201 • parse ॲཧͷඇಉظ

    & ฒྻԽ 
 https://github.com/rollup/rollup/pull/5202 • parse ΞϧΰϦζϜͷॲཧύεͷ࠷దԽ 
 https://github.com/rollup/rollup/pull/5207 PR#5207 ʹهࡌ͞ΕͨϕϯνϚʔΫ݁Ռ
  30. πʔϧνΣΠϯͷ Rust ԽͷΩʔϙΠϯτ͸ʁ • JavaScript ޲͚ͷπʔϧνΣΠϯ͸ίʔυղੳͱ AST Λॲཧ͢Δπʔϧ͕΄ͱΜͲ • JavaScript

    ʙ ωΟςΟϒؒͰ΍ΓͱΓ͢ΔAST ͷ (σ)γϦΞϥΠζΦʔόϔουΛ೗Կʹ཈͑ͯϚϧ νίΞԽͰ͖Δ͔ https://zenn.dev/hd_nvim/articles/09483b0155ebb6 Herrington Darkholme ࢯʹΑΔTypeScript ParserͷύϑΥʔϚϯεܭଌΑΓ
  31. ৽͍͠πʔϧνΣΠϯ΁ͷҠߦ͸Ճ଎͢Δʁ • େن໛ϓϩδΣΫτͷ৔߹͸ɺ৽͍͠πʔϧνΣΠϯ ΁ͷҠߦ͸͙͢ʹͰ͖ͳ͍ɺͦ͏؆୯Ͱ͸ͳ͍ • JavaScript πʔϧνΣΠϯपΓͷΤίγεςϜ͸ϓϥ άΠϯʹΑͬͯ੒Γཱ͍ͬͯΔͷ͕ଟ͍ • ಛʹ

    ESLintɺVite / WebpackɺBabel ͳͲͷϓϥάΠ ϯ͸ JavaScript Ͱ࣮૷͞Ε͍ͯΔ • Ҡߦ͢Δ͔Ͳ͏͔ɺͦͷπʔϧνΣΠϯ͕طଘπʔϧ νΣΠϯͱޓ׵ੑɺ૬ޓӡ༻͕͋Δ͔Ͳ͏͔࣍ୈͩͱ ࢥ͏
  32. Vue ͷ Rust Խ͸Ͳ͜ʹདྷΔͷ͔ • Vue ͸ JavaScript ϑϨʔϜϫʔΫ •

    UI Λ Web ΞϓϦέʔγϣϯͱͯ͠ߏங͢ΔͨΊͷϑ ϨʔϜϫʔΫ • Vue ͷ Rust Խ͕ཁٻ͞ΕΔ෦෼͸ҎԼͷ෦෼ • Vue Compiler • … ͳͲͷύϑΥʔϚϯε͕ཁٻ͞ΕΔ෦෼
  33. ࣮͸ Rust ੡ Vue Compiler ͕͋Δʂ • Vue ίϛϡχςΟͷਓ͕ ࡞͍ͬͯΔ

    • ࡞ͬͨਓ͸ Vue ίΞ νʔϜͰҎલ Vue ͷ TS पΓΛ͔ͳΓ Contribute ͍ͯͨ͠ 
 Herrington Darkholme ࢯ • ࠓޙϕʔεʹͳΔՄೳੑ ͸͋Δ͔΋ https://github.com/HerringtonDarkholme/vue-compiler
  34. ·ͱΊ (1/4) • Rolldown ͷঢ়گʹ͍ͭͯ࿩ͨ͠ • ݱঢ়ελʔτͨ͠͹͔ΓͰ·ͩ stage 1 •

    Rolldown ͱίϥϘ͍ͯ͠Δ Rspack νʔϜ (web-infra-dev) ʹͭ ͍ͯ࿩ͨ͠ • ༷ʑͳ Rust Ͱ࡞ΒΕͨ OSS Λఏڙ͍ͯ͠Δ • Rspack ͸ Rust Ͱ Webpack ͷޓ׵ੑ & ૬ޓӡ༻ੑΛߟྀ͠ ͭͭύϑΥʔϚϯε͕ಘΒΕΔΑ͏ʹ࡞ΒΕ͍ͯΔ • ϓϥάΠϯΛ࣋ͭ JavaScript πʔϧνΣΠϯΛಈ࡞ͤ͞Δ࣮ ੷Λ࣋ͪͭͭ͋Δ
  35. ·ͱΊ (2/4) • Rolldown Ͱ࢖͏ JS Parser ͷ Oxc ʹ͍ͭͯ࿩ͨ͠

    • Oxc ͸ JS / TS ޲͚ʹ Rust ͰϋΠύϑΥʔϚϯε ͳπʔϧνΣΠϯΛఏڙ͢ΔϓϩδΣΫτ • Oxc ͸֦ுੑΛҙࣝͯ͠πʔϧ୯ಠ͚ͩͰͳ͘ crate ͳͲʹΑͬͯ API Λఏڙ͍ͯ͠Δ • Rolldown ΛؚΊͨଞͷίϛϡχςΟͱͷίϥϘ Λҙࣝͯ͠ϓϩδΣΫτ͕֦େ͍ͯ͘͠ͱظ଴
  36. ·ͱΊ (3/4) • πʔϧνΣΠϯͷಈ޲ʹ͍ͭͯݟղΛ࿩ͨ͠ • JavaScript πʔϧք۾Ͱ͸ωΟςΟϒԽ͕τϨϯυʹͳ͍ͬͯΔ • ͨͩɺطଘπʔϧνΣΠϯͷωΟςΟϒԽ͸೉͍͠ •

    ίϛϡχςΟ͕৽͍͠πʔϧνΣΠϯ΁Ҡߦ͢Δʹ͸ɺطଘπʔϧ νΣΠϯ͕ޓ׵ੑ & ૬ޓӡ༻ੑΛαϙʔτͭͭ͠ɺ೗ԿʹύϑΥʔ ϚϯεΛվળͰ͖Δ͔͕ϙΠϯτ • ωΟςΟϒԽʹର͢Δ JavaScript ίϛϡχςΟͷΞϯνςʔθͳಈ ͖΋͋Δ • πʔϧνΣΠϯ͸ࠓޙ͸ͦͷΑ͏ͳಈ͖ͷதɺք۾ͰܹࢗΛ͏͚ͳ ͕Βզʑʹఏڙ͞Ε͍ͯ͘ͱ༧૝͞ΕΔ
  37. ·ͱΊ (4/4) • Vue ͷ Rust Խ ʹ͍ͭͯ࿩ͨ͠ • Vite

    ͷ Rolldown Ͱ Evan ࢯ΋ Rust Խʹ޲͚ͯε λʔτ͍ͯ͠Δ • Vue ίϛϡχςΟʹΑͬͯ͢Ͱʹ Vue Compiler ͕͋Δ • ࠓޙ Vite ͷ Rolldown ͦͯ͠ Oxc ͷ൓ڹ͕ Vue ΍ΤίγεςϜʹ΋΍ͬͯ͘Δͱظ଴Ͱ͖Δ
  38. ࠷ޙʹ • Vue Fes Japan 2024 ։࠵͠·͢ʂ • Vue Fes

    ίΞελοϑืूͯ͠·͢ʂϦϞʔτͰ΋ ׆ಈͰ͖ΔͷͰࢀՃՄೳͰ͢ʂ • ڵຯ͕͋Δํ͸ɺ࠙਌ձ੠͔͚͍ͯͩ͘͞ʂ