Vue & Vite Rustify - Speaker Deck

Slide 1

Slide 1 text

Vue & Vite Rustify Vue Fes Japan 2023 After Meetup 2023-11-07 (ϝυϐΞגࣜձࣾ x MNTSQגࣜձࣾ x גࣜձࣾ hacomono) 2023-12-03 (FukuokaJS x LINEϠϑʔίϛϡχέʔγϣϯζגࣜձࣾ) @kazupon

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ

Slide 5

Slide 5 text

ΞδΣϯμ • Vue Fes Japan 2023 ͷৼΓฦΓ • Rolldown • ίϥϘϨʔγϣϯ͍ͯ͠ΔRspack νʔϜͱOSS • Oxc • πʔϧνΣΠϯͷಈ޲ • Vue ʹ Rust ͷ೾͸΍ͬͯ͘Δʁ

Slide 6

Slide 6 text

Vue Fes Japan 2023

Slide 7

Slide 7 text

• 2023/10/28 ͍ͭʹ5೥ͿΓͷΦϑϥΠϯ։࠵ʂ Vue Fes Japan 2023

Slide 8

Slide 8 text

ΞϑλʔϜʔϏʔ • ΞϑλʔϜʔϏʔ͕Ͱ͖ͨͷͰྲྀ͠·͢ https://www.youtube.com/watch?v=rWIal-epFXQ

Slide 9

Slide 9 text

State of Vue Fes Japan 2023 • શࢀՃऀ਺: 583 ໊ • ηογϣϯ: 33 (ຊηογϣϯ + LTηογϣϯ) • εϙϯαʔ਺: 46 • ݸਓεϙϯαʔ਺: 44 ໊ • ΞϑλʔύʔςΟʔࢀՃऀ਺: 300 ໊ (ຬ੮)

Slide 10

Slide 10 text

Πϕϯτ & ࠵͠෺ • ϋϯζΦϯ • ύωϧςΟΧογϣϯ • Vue.js ΫϦχοΫ (Q & A) • ΫϦΤΠςΟϒ΢Υʔϧ • Vue Fes Store (άοζ) • ελϯϓϥϦʔ & λτΡʔ

Slide 11

Slide 11 text

Ωʔϊʔτ • Vue 2 ͔Β Vue 3 ͷৼΓฦΓͱ Vue ͷࠓޙʹ͍ͭͯ • Vite ͷࠓޙʹ͍ͭͯ

Slide 12

Slide 12 text

Ωʔϊʔτ ཁ໿

Slide 13

Slide 13 text

Ωʔϊʔτલ൒ • Vue 2 ͔Β Vue 3 ͷҠߦͷৼΓฦΓ • ؒҧ͍͔ΒͷֶͼɺऔΓ૊Μͩ͜ͱͦͯ͠͏·͘ ͍ͬͨ͜ͱʹ͍ͭͯ࿩ͨ͠ ؒҧ͍ͱֶͼɺͦͯ͠͏·͍ͬͨ͘͜ͱͷέʔεͷҰྫ

Slide 14

Slide 14 text

Ωʔϊʔτલ൒ • Vue ͷࠓޙʹ͍ͭͯ • Vue 3.4 alpha • computed property ͷվળ • Reactivity Transform ͷ࡟আ • TSͷܕपΓͷվળ • …ͳͲ

Slide 15

Slide 15 text

Ωʔϊʔτલ൒ • Vue ͷࠓޙʹ͍ͭͯ • Vue 3.5 ͷϩʔυϚοϓ • SSR पΓ (Suspence / Lazy hydration) ͷվળ • Custom Elements (Web Components) ͷվળ • … ͳͲ • Vapor Ϟʔυ • virtual dom Λ࢖Θͳ͍ runtime-less ͳ৽͍͠ίϯύΠϧϞʔυ • 2024೥ 1Q / 2Q ༧ఆ

Slide 16

Slide 16 text

Ωʔϊʔτޙ൒ • Vite ͷࠓޙʹ͍ͭͯ • Vite ͷ՝୊Λղܾ͢ΔͨΊʹ Rust Խʹ஫ྗ͍ͯ͠ ͘ͱݴٴ • Rolldown • Rust ʹΑͬͯωΠςΟϒ࣮૷͞Εͨ Rollup ޓ׵ ͷόϯυϥʔ • Vite ͷ Rust Խ΋ϩʔυϚοϓʹैͬͯஈ֊తʹ ߦ͍ͬͯ͘

Slide 17

Slide 17 text

Rolldown

Slide 18

Slide 18 text

Rolldownͱ͸ • Vite ಺෦Ͱ࢖͍ͬͯΔ Rollup Λ Rust Խͨ͠΋ͷ • ໨త:   Rollup ͱͳΔ΂͘ಉ͡ڍಈʹͳΔΑ͏ޓ׵ੑΛҡ࣋ ͭͭ͠ϏϧυύϑΥʔϚϯεΛఏڙ͢Δ • ΰʔϧ:   Vite Λ࢖͏Ϣʔβʔʹ͸࠷খݶͷӨڹͰ Rollup Λ ஔ͖׵͑Δ

Slide 19

Slide 19 text

ͳͥ RolldownΛ࡞Δͷ͔

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Slide 22

Slide 22 text

production Ϗϧυ͕஗͍ • Rollup ͸ JS ࣮૷Ͱ΋଎͍ • ͨͩɺJS ͸γϯάϧεϨουɺΠϕϯτۦಈ • όϯυϧ͸ CPU ϔϏʔ • όϯυϧ͢Δྔ͕ଟ͘ͳͬͯ͘ΔͱɺJS ͷ parse ɺtransformɺmi fi nifyɺsource-mapͱ͍ͬͨ ॲཧ͕ελοΫͯ͠͠·͍஗͘ͳΔ

Slide 23

Slide 23 text

development ͱ production ͱͷόϯυϧҰ؏ੑ • development Ͱ͸ esbuild ͕࢖ΘΕΔ • naitive & ϚϧνεϨουʹΑΓϏϧυ͸଎͍ʂ • asset ࠷దԽपΓͷ੍ޚʹ੍ݶ͕͋Δ • Plugin API ͕ॊೈͰ͸ͳ͍

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

development ͱ production ͱͷόϯυϧҰ؏ੑ • production Ͱ͸ Rollup Λ࢖ͬͯόϯυϧ͢Δ • Plugin API ͸ॊೈ! ͢΂ͯJavaScript! • ESM/CJS ޓ׵ΛվળͰ͖Δ • ͨͩ esbuild ͱൺ΂Δͱ஗͍ ͦΕͧΕͷ௕ॴΛར༻͍ͯ͠ΔͨΊɺesbuild΋͘͠͸ଞͷ navite bundlerʹϦϓϨʔεͰ͖ͳ͍...

Slide 26

Slide 26 text

Rolldown ͷ։ൃ

Slide 27

Slide 27 text

Rolldown ։ൃঢ়گ • status: • εςʔδ1:   (Vue Fes 2023 Ͱݴٴͨ͠ϩʔυϚοϓͷ 1/4)           • Rspack νʔϜͦͯ͠ Rollup ͷίΞϝϯςφͱ͍ͬ ͠ΐʹίϥϘϨʔγϣϯ͠ͳ͕Β։ൃ͍ͯ͠Δ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Rolldown ͷςετ • Rolldown ͷςετ͸ɺطଘͷ Rollup ͷ Test fi xtures & Test ίʔυΛ࢖ͬͯςετ͍ͯ͠Δ

Slide 30

Slide 30 text

Demo: Rolldown on Vite • ϒϥ΢β্Ͱ Rolldown (wasm) Ͱόϯυϧ͢ΔσϞ

Slide 31

Slide 31 text

ίϥϘ͍ͯ͠Δ RspackνʔϜʹ͍ͭͯ

Slide 32

Slide 32 text

RspackνʔϜ • Rspack Λ։ൃ͍ͯ͠ΔνʔϜ • Rspack ͸ Bytedance ͷ web-infra-dev ͱ͍͏ϑϩ ϯτΤϯυπʔϧνΣʔϯपΓͷ OSS ͷҰ෦

Slide 33

Slide 33 text

web-infra-dev

Slide 34

Slide 34 text

web-infra-dev ͱ͸ • Bytedance͕ࣗࣾͷ੒௕ʹ޲͚ͯɺϑϩϯτΤϯυ ٕज़޲͚ʹΦʔϓϯͳٕज़ΤίγεςϜΛߏங͢Δ ͜ͱΛ໨తͱͯ͠׆ಈ͍ͯ͠Δ Web: https://webinfra.org/ GitHub: https://github.com/web-infra-dev

Slide 35

Slide 35 text

web-infra-dev ͸৭ʑ OSS ࡞͍ͬͯΔ • Rust ੡ Rspack Λϕʔε & ίΞपΓͷ৭ʑͳ OSS Λఏڙ͍ͯ͠Δ

Slide 36

Slide 36 text

web-infra-dev͸Φʔϓϯʹ৘ใެ։͍ͯ͠Δ • ઃܭ΍ಛఆͷٕज़Λௐ΂ͨ͜ͱΛΦʔϓϯ͍ͯ͠Δ https://github.com/orgs/web-infra-dev/discussions/9

Slide 37

Slide 37 text

Rspack

Slide 38

Slide 38 text

Rspack • WebpackΤίγεςϜͱ૬ޓӡ༻Λఏڙ͢ΔRust੡ ߴ଎όϯυϥʔ https://www.rspack.dev/

Slide 39

Slide 39 text

Rspack ͕ੜ·Εͨഎܠ • Bytedance͕ࣗ෼ͨͪͷϏϧυύϑΥʔϚϯεΛվ ળ͢ΔͨΊʹ࡞ͬͨ • ϞϊϦγοΫͳϓϩδΣΫτͰ20෼ʙ30෼͔͔ͬ ͍ͯͨ • 2022೥4݄͔Β։ൃ։࢝ɺ2023೥3݄OSSͱͯ͠ެ ։

Slide 40

Slide 40 text

Webpack ͷ໰୊఺΋͍ͬ͠ΐʹվળ • Webpack ͷ໰୊Ͱ͋ͬͨ dev αʔόىಈ஗͍໰୊ ͸ωΟςΟϒΛར༻্ཱͯ͠Γ͕଎͘ͳ͍ͬͯΔ • ϓϩμΫγϣϯϏϧυ΋ߴ଎Խ https://www.rspack.dev/misc/benchmark.html#data

Slide 41

Slide 41 text

HMR ΋ߴ଎Խ • 10,000 React ίϯϙʔωϯτͷέʔε: https://www.rspack.dev/misc/benchmark.html#data-1

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Rspackͷࠓޙ • ݱ࣌఺Ͱ͸webpackͷ͢΂ͯͷػೳ͸ຬ͍ͨͯ͠Δ Θ͚Ͱ͸ͳ͍ • ίϛϡχςΟͱͷίϥϘϨʔγϣϯʹΑͬͯϑΟʔ υόοΫΛಘͭͭɺύϨʔτͷ๏ଇʹج͍ͮͯඞཁ ͳ෺ΛऔΓೖΕͯఏڙ͍ͯ͘͠ • ϓϥάΠϯػೳΛڧԽ͍ͯ͘͠ • ܧଓతͳύϑΥʔϚϯεͷ޲্

Slide 44

Slide 44 text

Oxc

Slide 45

Slide 45 text

The Oxidation Compiler • JavaScript / TypeScript ޲͚ͷϋΠύϑΥʔϚϯεͷπʔϧ܊ Λ Rust Ͱ࣮૷ͨ͠΋ͷΛఏڙ͢ΔΦʔϓϯιʔεϓϩδΣΫτ • parser • linter • formatter • transpiler • mini fi er • type checker https://github.com/oxc-project/oxc ࡞ऀ͸ Bytedance ͷ Rspack νʔϜͷਓ

Slide 46

Slide 46 text

ࢥ૝ • Biome (چ: Rome) ΍ Ruff ͱಉ͡ • Biome: https://biomejs.dev/blog/annoucing-biome Oxc ΋πʔϧνΣΠϯΛ౷߹ͯ͠རศੑΛఏڙ͢Δ https://oxc-project.github.io/docs/guide/introduction.html

Slide 47

Slide 47 text

Biome ͱͷҧ͍ • Biome • JS / TS ͚ͩͰͳ͘ Web ։ൃʹؔ͢Δݴޠશൠ޲͚ ͷπʔϧνΣΠϯ • ઃఆΛۃྗݮΒ͠ɺσϑΥϧτϕʔεͳπʔϧΛ૝ఆ • Oxc • JS / TS ޲͚ͷπʔϧνΣΠϯͱͯ͠ϑΥʔΧε • πʔϧΛ֦ுͰ͖Δ͜ͱΛ૝ఆ https://zenn.dev/cybozu_frontend/articles/thinking-about-oxc

Slide 48

Slide 48 text

Parser & Lint ύϑΥʔϚϯε

Slide 49

Slide 49 text

Oxc ͸ crate Λఏڙ͍ͯ͠Δ • ͍͔ͭ͘ఏڙ͍ͯ͠Δ crate Λར༻͢Δ͜ͱͰࣗ෼ ͰπʔϧνΣʔϯΛ࡞Δ͜ͱ΋Ͱ͖Δ • oxc_ast:   estree like ͳ AST ޲͚ͷϥΠϒϥϦ • oxc_parser:   JS / TS parser ϥΠϒϥϦ • And etc …

Slide 50

Slide 50 text

Oxc Playground Λࢼ͢͜ͱ͕Ͱ͖Δ https://oxc-project.github.io/oxc/playground

Slide 51

Slide 51 text

Oxc ͷݱঢ় https://github.com/oxc-project/oxc/issues/481 • ݱঢ় Linter ʹϑΥʔΧε͠ ͍ͯΔ໛༷ • Lintͷϧʔϧ͸ɺΑ͘࢖ΘΕ ͍ͯΔ ESLint / typescript- eslint ͷ recommended ϧʔ ϧΛఏڙ͢Δ༧ఆ • ϓϥάΠϯΞʔΩςΫνϟ ͸ɺGraphQL αϒηοτʹ ͍ۙ Trustfall Λ࠾༻͢Δ༧ ఆ

Slide 52

Slide 52 text

VSCode ͷ֦ு͕ఏڙ͞Ε͍ͯΔ • ͍ͭ࠷ۙ VSCode ֦ுΛఏڙ࢝͠Ίͨ https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode

Slide 53

Slide 53 text

ଞͷπʔϧঢ়گ • Mini fi er • WIP: ϓϩτλΠϐϯάத • Transpiler • WIP: https://github.com/web-infra-dev/oxc/issues/974 • Formatter • Ϧιʔε͕଍Γͳͯ͘ख͕͚͍ͭͯͳ͍ঢ়گ • Type Checker • Ezno Λ࢖͍ͬͯΔ͕·ͩ experimental

Slide 54

Slide 54 text

Oxc ͷࠓޙ • શମͷϩʔυϚοϓ͕ͳ͍ͨΊݸਓతݟղ • ίϛϡχςΟΛר͖ࠐΜͰπʔϧνΣΠϯΛ࣮૷ ͯ͠ఏڙ͍ͯ͘͠ͱࢥΘΕΔ • Boshen ࢯ͸ Twitter (ݱ: X)ɺGitHub ͱ͍ͬͨ SNS ΛΑ͘࢖ͬͯίϛϡχέʔγϣϯ͠ͳ͕Βר ͖ࠐΜͰ͍Δ

Slide 55

Slide 55 text

JS πʔϧνΣΠϯΛ࡞Γ͍ͨਓ޲͚ʹΨΠυ͕͋Δ https://oxc-project.github.io/javascript-parser-in-rust/

Slide 56

Slide 56 text

πʔϧνΣΠϯͷಈ޲

Slide 57

Slide 57 text

• Rust ͳͲͷݴޠʹΑΔωΟςΟϒԽʹΑΔஔ׵͑ • Parser • Bundler • Formatter • Linter • Loader • … and etc ࠷ۙͷ JavaScript πʔϧք۾ͷτϨϯυ

Slide 58

Slide 58 text

طଘπʔϧνΣΠϯͷωΠςΟϒԽͷࢼΈ • ESLint ͸ݕূͯ͠Έͨ݁Ռɺ೉͔ͬͨ͠໛༷… https://twitter.com/slicknet/status/1729157481207824702 AST ͷ(σ)γϦΞϥΠζͷίετ͕ωΠςΟϒԽͯ͠΋ ϖΠ͠ͳ͍

Slide 59

Slide 59 text

ͪͳΈʹ Rollup v4 Ͱ΋ۤઓ͍ͯ͠Δ • JS parser ͸ Acorn ͔Β SWC ʹஔ׵͕͑ͨɺॳظ ࣮૷Ͱ͸͋·ΓύϑΥʔϚϯε͕Ͱ͍ͯͳͬͨ https://github.com/rollup/rollup/issues/5182

Slide 60

Slide 60 text

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 ʹهࡌ͞ΕͨϕϯνϚʔΫ݁Ռ

Slide 61

Slide 61 text

πʔϧνΣΠϯͷ Rust ԽͷΩʔϙΠϯτ͸ʁ • JavaScript ޲͚ͷπʔϧνΣΠϯ͸ίʔυղੳͱ AST Λॲཧ͢Δπʔϧ͕΄ͱΜͲ • JavaScript ʙ ωΟςΟϒؒͰ΍ΓͱΓ͢ΔAST ͷ (σ)γϦΞϥΠζΦʔόϔουΛ೗Կʹ཈͑ͯϚϧ νίΞԽͰ͖Δ͔ https://zenn.dev/hd_nvim/articles/09483b0155ebb6 Herrington Darkholme ࢯʹΑΔTypeScript ParserͷύϑΥʔϚϯεܭଌΑΓ

Slide 62

Slide 62 text

৽͍͠πʔϧνΣΠϯ΁ͷҠߦ͸Ճ଎͢Δʁ • ৽نϓϩδΣΫτ͸ɺطଘπʔϧνΣΠϯʹ͕͠Β Έ͕ͳ͍ͷͰ࠾༻͍ͯ͘͠ྲྀΕ͸ى͖ͦ͏ • தখن໛ͷϓϩδΣΫτͷέʔε͸ɺ৽͍͠πʔϧ νΣΠϯͷ DX ʹΑͬͯɺҠߦίετ͕ϖΠͰ͖Δ ͳΒɺஔ׵͑ͷྲྀΕ͸ى͖ͦ͏

Slide 63

Slide 63 text

৽͍͠πʔϧνΣΠϯ΁ͷҠߦ͸Ճ଎͢Δʁ • େن໛ϓϩδΣΫτͷ৔߹͸ɺ৽͍͠πʔϧνΣΠϯ ΁ͷҠߦ͸͙͢ʹͰ͖ͳ͍ɺͦ͏؆୯Ͱ͸ͳ͍ • JavaScript πʔϧνΣΠϯपΓͷΤίγεςϜ͸ϓϥ άΠϯʹΑͬͯ੒Γཱ͍ͬͯΔͷ͕ଟ͍ • ಛʹ ESLintɺVite / WebpackɺBabel ͳͲͷϓϥάΠ ϯ͸ JavaScript Ͱ࣮૷͞Ε͍ͯΔ • Ҡߦ͢Δ͔Ͳ͏͔ɺͦͷπʔϧνΣΠϯ͕طଘπʔϧ νΣΠϯͱޓ׵ੑɺ૬ޓӡ༻͕͋Δ͔Ͳ͏͔࣍ୈͩͱ ࢥ͏

Slide 64

Slide 64 text

ωΟςΟϒԽʹର͢ΔΞϯνςʔθͳಈ͖΋Ͱ͖ͯͨ • tapjs/tsimp   Node.js Ͱ TS ͷίʔυΛܕνΣοΫ͠ͳ͕Βίϯ ύΠϧͰ͖Δ loader https://github.com/tapjs/tsimp

Slide 65

Slide 65 text

ωΟςΟϒԽʹର͢ΔΞϯνςʔθͳಈ͖΋Ͱ͖ͯͨ • Prettier   CLI ଆͷϑΝΠϧݕࡧ΍ parse ͷվળɺΩϟογϡ ͳͲʹΑΔ஍ಓͳվળ https://prettier.io/blog/2023/11/30/cli-deep-dive

Slide 66

Slide 66 text

Vue.js ͱ Rust

Slide 67

Slide 67 text

Vue ʹ Rust Խͷ೾͸΍ͬͯ͘Δʁ • ݸਓతݟղ: ΍ͬͯ͘Δͱࢥ͍·͢ https://github.com/vuejs/rfcs/discussions/369#discussioncomment-1192421 ͳͥͳΒɺ GitHub Discussions ͦͯ͠ Vue Fes Japan Ͱ΋ Rust Խʹ͍ͭͯ΋ݴٴͨ͠

Slide 68

Slide 68 text

Vue ͷ Rust Խ͸Ͳ͜ʹདྷΔͷ͔ • Vue ͸ JavaScript ϑϨʔϜϫʔΫ • UI Λ Web ΞϓϦέʔγϣϯͱͯ͠ߏங͢ΔͨΊͷϑ ϨʔϜϫʔΫ • Vue ͷ Rust Խ͕ཁٻ͞ΕΔ෦෼͸ҎԼͷ෦෼ • Vue Compiler • … ͳͲͷύϑΥʔϚϯε͕ཁٻ͞ΕΔ෦෼

Slide 69

Slide 69 text

࣮͸ Rust ੡ Vue Compiler ͕͋Δʂ • Vue ίϛϡχςΟͷਓ͕ ࡞͍ͬͯΔ • ࡞ͬͨਓ͸ Vue ίΞ νʔϜͰҎલ Vue ͷ TS पΓΛ͔ͳΓ Contribute ͍ͯͨ͠   Herrington Darkholme ࢯ • ࠓޙϕʔεʹͳΔՄೳੑ ͸͋Δ͔΋ https://github.com/HerringtonDarkholme/vue-compiler

Slide 70

Slide 70 text

·ͱΊ

Slide 71

Slide 71 text

·ͱΊ (1/4) • Rolldown ͷঢ়گʹ͍ͭͯ࿩ͨ͠ • ݱঢ়ελʔτͨ͠͹͔ΓͰ·ͩ stage 1 • Rolldown ͱίϥϘ͍ͯ͠Δ Rspack νʔϜ (web-infra-dev) ʹͭ ͍ͯ࿩ͨ͠ • ༷ʑͳ Rust Ͱ࡞ΒΕͨ OSS Λఏڙ͍ͯ͠Δ • Rspack ͸ Rust Ͱ Webpack ͷޓ׵ੑ & ૬ޓӡ༻ੑΛߟྀ͠ ͭͭύϑΥʔϚϯε͕ಘΒΕΔΑ͏ʹ࡞ΒΕ͍ͯΔ • ϓϥάΠϯΛ࣋ͭ JavaScript πʔϧνΣΠϯΛಈ࡞ͤ͞Δ࣮ ੷Λ࣋ͪͭͭ͋Δ

Slide 72

Slide 72 text

·ͱΊ (2/4) • Rolldown Ͱ࢖͏ JS Parser ͷ Oxc ʹ͍ͭͯ࿩ͨ͠ • Oxc ͸ JS / TS ޲͚ʹ Rust ͰϋΠύϑΥʔϚϯε ͳπʔϧνΣΠϯΛఏڙ͢ΔϓϩδΣΫτ • Oxc ͸֦ுੑΛҙࣝͯ͠πʔϧ୯ಠ͚ͩͰͳ͘ crate ͳͲʹΑͬͯ API Λఏڙ͍ͯ͠Δ • Rolldown ΛؚΊͨଞͷίϛϡχςΟͱͷίϥϘ Λҙࣝͯ͠ϓϩδΣΫτ͕֦େ͍ͯ͘͠ͱظ଴

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

·ͱΊ (4/4) • Vue ͷ Rust Խ ʹ͍ͭͯ࿩ͨ͠ • Vite ͷ Rolldown Ͱ Evan ࢯ΋ Rust Խʹ޲͚ͯε λʔτ͍ͯ͠Δ • Vue ίϛϡχςΟʹΑͬͯ͢Ͱʹ Vue Compiler ͕͋Δ • ࠓޙ Vite ͷ Rolldown ͦͯ͠ Oxc ͷ൓ڹ͕ Vue ΍ΤίγεςϜʹ΋΍ͬͯ͘Δͱظ଴Ͱ͖Δ

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ❤