Vue & Vite Rustify

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. ࣗݾ঺հ
3. 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
4. ࠓ೔࿩͢͜ͱ
5. ΞδΣϯμ • Vue Fes Japan 2023 ͷৼΓฦΓ • Rolldown • ίϥϘϨʔγϣϯ͍ͯ͠ΔRspack νʔϜͱOSS • Oxc • πʔϧνΣΠϯͷಈ޲ • Vue ʹ Rust ͷ೾͸΍ͬͯ͘Δʁ
6. Vue Fes Japan 2023
7. • 2023/10/28 ͍ͭʹ5೥ͿΓͷΦϑϥΠϯ։࠵ʂ Vue Fes Japan 2023
8. ΞϑλʔϜʔϏʔ • ΞϑλʔϜʔϏʔ͕Ͱ͖ͨͷͰྲྀ͠·͢ https://www.youtube.com/watch?v=rWIal-epFXQ
9. State of Vue Fes Japan 2023 • શࢀՃऀ਺: 583 ໊ • ηογϣϯ: 33 (ຊηογϣϯ + LTηογϣϯ) • εϙϯαʔ਺: 46 • ݸਓεϙϯαʔ਺: 44 ໊ • ΞϑλʔύʔςΟʔࢀՃऀ਺: 300 ໊ (ຬ੮)
10. Πϕϯτ & ࠵͠෺ • ϋϯζΦϯ • ύωϧςΟΧογϣϯ • Vue.js ΫϦχοΫ (Q & A) • ΫϦΤΠςΟϒ΢Υʔϧ • Vue Fes Store (άοζ) • ελϯϓϥϦʔ & λτΡʔ
11. Ωʔϊʔτ • Vue 2 ͔Β Vue 3 ͷৼΓฦΓͱ Vue ͷࠓޙʹ͍ͭͯ • Vite ͷࠓޙʹ͍ͭͯ
12. Ωʔϊʔτ ཁ໿
13. Ωʔϊʔτલ൒ • Vue 2 ͔Β Vue 3 ͷҠߦͷৼΓฦΓ • ؒҧ͍͔ΒͷֶͼɺऔΓ૊Μͩ͜ͱͦͯ͠͏·͘ ͍ͬͨ͜ͱʹ͍ͭͯ࿩ͨ͠ ؒҧ͍ͱֶͼɺͦͯ͠͏·͍ͬͨ͘͜ͱͷέʔεͷҰྫ
14. Ωʔϊʔτલ൒ • Vue ͷࠓޙʹ͍ͭͯ • Vue 3.4 alpha • computed property ͷվળ • Reactivity Transform ͷ࡟আ • TSͷܕपΓͷվળ • …ͳͲ
15. Ωʔϊʔτલ൒ • Vue ͷࠓޙʹ͍ͭͯ • Vue 3.5 ͷϩʔυϚοϓ • SSR पΓ (Suspence / Lazy hydration) ͷվળ • Custom Elements (Web Components) ͷվળ • … ͳͲ • Vapor Ϟʔυ • virtual dom Λ࢖Θͳ͍ runtime-less ͳ৽͍͠ίϯύΠϧϞʔυ • 2024೥ 1Q / 2Q ༧ఆ
16. Ωʔϊʔτޙ൒ • Vite ͷࠓޙʹ͍ͭͯ • Vite ͷ՝୊Λղܾ͢ΔͨΊʹ Rust Խʹ஫ྗ͍ͯ͠ ͘ͱݴٴ • Rolldown • Rust ʹΑͬͯωΠςΟϒ࣮૷͞Εͨ Rollup ޓ׵ ͷόϯυϥʔ • Vite ͷ Rust Խ΋ϩʔυϚοϓʹैͬͯஈ֊తʹ ߦ͍ͬͯ͘
17. Rolldown
18. Rolldownͱ͸ • Vite ಺෦Ͱ࢖͍ͬͯΔ Rollup Λ Rust Խͨ͠΋ͷ • ໨త: 
 Rollup ͱͳΔ΂͘ಉ͡ڍಈʹͳΔΑ͏ޓ׵ੑΛҡ࣋ ͭͭ͠ϏϧυύϑΥʔϚϯεΛఏڙ͢Δ • ΰʔϧ: 
 Vite Λ࢖͏Ϣʔβʔʹ͸࠷খݶͷӨڹͰ Rollup Λ ஔ͖׵͑Δ
19. ͳͥ RolldownΛ࡞Δͷ͔
20. Vite ๊͕͑Δ՝୊Λղܾ͍ͨ͠ • production Ϗϧυ͕஗͍ • development ͱ production ͱͷόϯυϧͷҰ؏ੑ • development ʹ͓͍ͯൃੜ͢ΔωοτϫʔΫΦʔ όʔϔου • νϟϯΫ෼ׂ (code chunk split) ੍ޚʹ੍ݶ͕͋Δ • ϞδϡʔϧϑΣσϨʔγϣϯ͕ͳ͍
21. Vite ๊͕͑Δ՝୊Λղܾ͍ͨ͠ • production Ϗϧυ͕஗͍ • development ͱ production ͱͷόϯυϧͷҰ؏ੑ • development ʹ͓͍ͯൃੜ͢ΔωοτϫʔΫΦʔ όʔϔου • νϟϯΫ෼ׂ (code chunk split) ੍ޚʹ੍ݶ͕͋Δ • ϞδϡʔϧϑΣσϨʔγϣϯ͕ͳ͍
22. production Ϗϧυ͕஗͍ • Rollup ͸ JS ࣮૷Ͱ΋଎͍ • ͨͩɺJS ͸γϯάϧεϨουɺΠϕϯτۦಈ • όϯυϧ͸ CPU ϔϏʔ • όϯυϧ͢Δྔ͕ଟ͘ͳͬͯ͘ΔͱɺJS ͷ parse ɺtransformɺmi fi nifyɺsource-mapͱ͍ͬͨ ॲཧ͕ελοΫͯ͠͠·͍஗͘ͳΔ
23. development ͱ production ͱͷόϯυϧҰ؏ੑ • development Ͱ͸ esbuild ͕࢖ΘΕΔ • naitive & ϚϧνεϨουʹΑΓϏϧυ͸଎͍ʂ • asset ࠷దԽपΓͷ੍ޚʹ੍ݶ͕͋Δ • Plugin API ͕ॊೈͰ͸ͳ͍
24. development ͱ production ͱͷόϯυϧҰ؏ੑ • production Ͱ͸ Rollup Λ࢖ͬͯόϯυϧ͢Δ • Plugin API ͸ॊೈ! ͢΂ͯJavaScript! • ESM/CJS ޓ׵ΛվળͰ͖Δ • ͨͩ esbuild ͱൺ΂Δͱ஗͍
25. development ͱ production ͱͷόϯυϧҰ؏ੑ • production Ͱ͸ Rollup Λ࢖ͬͯόϯυϧ͢Δ • Plugin API ͸ॊೈ! ͢΂ͯJavaScript! • ESM/CJS ޓ׵ΛվળͰ͖Δ • ͨͩ esbuild ͱൺ΂Δͱ஗͍ ͦΕͧΕͷ௕ॴΛར༻͍ͯ͠ΔͨΊɺesbuild΋͘͠͸ଞͷ navite bundlerʹϦϓϨʔεͰ͖ͳ͍...
26. Rolldown ͷ։ൃ
27. Rolldown ։ൃঢ়گ • status: • εςʔδ1: 
 (Vue Fes 2023 Ͱݴٴͨ͠ϩʔυϚοϓͷ 1/4) 
 
 
 
 
 • Rspack νʔϜͦͯ͠ Rollup ͷίΞϝϯςφͱ͍ͬ ͠ΐʹίϥϘϨʔγϣϯ͠ͳ͕Β։ൃ͍ͯ͠Δ
28. 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
29. Rolldown ͷςετ • Rolldown ͷςετ͸ɺطଘͷ Rollup ͷ Test fi xtures & Test ίʔυΛ࢖ͬͯςετ͍ͯ͠Δ
30. Demo: Rolldown on Vite • ϒϥ΢β্Ͱ Rolldown (wasm) Ͱόϯυϧ͢ΔσϞ
31. ίϥϘ͍ͯ͠Δ RspackνʔϜʹ͍ͭͯ
32. RspackνʔϜ • Rspack Λ։ൃ͍ͯ͠ΔνʔϜ • Rspack ͸ Bytedance ͷ web-infra-dev ͱ͍͏ϑϩ ϯτΤϯυπʔϧνΣʔϯपΓͷ OSS ͷҰ෦
33. web-infra-dev
34. web-infra-dev ͱ͸ • Bytedance͕ࣗࣾͷ੒௕ʹ޲͚ͯɺϑϩϯτΤϯυ ٕज़޲͚ʹΦʔϓϯͳٕज़ΤίγεςϜΛߏங͢Δ ͜ͱΛ໨తͱͯ͠׆ಈ͍ͯ͠Δ Web: https://webinfra.org/ GitHub: https://github.com/web-infra-dev
35. web-infra-dev ͸৭ʑ OSS ࡞͍ͬͯΔ • Rust ੡ Rspack Λϕʔε & ίΞपΓͷ৭ʑͳ OSS Λఏڙ͍ͯ͠Δ
36. web-infra-dev͸Φʔϓϯʹ৘ใެ։͍ͯ͠Δ • ઃܭ΍ಛఆͷٕज़Λௐ΂ͨ͜ͱΛΦʔϓϯ͍ͯ͠Δ https://github.com/orgs/web-infra-dev/discussions/9
37. Rspack
38. Rspack • WebpackΤίγεςϜͱ૬ޓӡ༻Λఏڙ͢ΔRust੡ ߴ଎όϯυϥʔ https://www.rspack.dev/
39. Rspack ͕ੜ·Εͨഎܠ • Bytedance͕ࣗ෼ͨͪͷϏϧυύϑΥʔϚϯεΛվ ળ͢ΔͨΊʹ࡞ͬͨ • ϞϊϦγοΫͳϓϩδΣΫτͰ20෼ʙ30෼͔͔ͬ ͍ͯͨ • 2022೥4݄͔Β։ൃ։࢝ɺ2023೥3݄OSSͱͯ͠ެ ։
40. Webpack ͷ໰୊఺΋͍ͬ͠ΐʹվળ • Webpack ͷ໰୊Ͱ͋ͬͨ dev αʔόىಈ஗͍໰୊ ͸ωΟςΟϒΛར༻্ཱͯ͠Γ͕଎͘ͳ͍ͬͯΔ • ϓϩμΫγϣϯϏϧυ΋ߴ଎Խ https://www.rspack.dev/misc/benchmark.html#data
41. HMR ΋ߴ଎Խ • 10,000 React ίϯϙʔωϯτͷέʔε: https://www.rspack.dev/misc/benchmark.html#data-1
42. 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
43. Rspackͷࠓޙ • ݱ࣌఺Ͱ͸webpackͷ͢΂ͯͷػೳ͸ຬ͍ͨͯ͠Δ Θ͚Ͱ͸ͳ͍ • ίϛϡχςΟͱͷίϥϘϨʔγϣϯʹΑͬͯϑΟʔ υόοΫΛಘͭͭɺύϨʔτͷ๏ଇʹج͍ͮͯඞཁ ͳ෺ΛऔΓೖΕͯఏڙ͍ͯ͘͠ • ϓϥάΠϯػೳΛڧԽ͍ͯ͘͠ • ܧଓతͳύϑΥʔϚϯεͷ޲্
44. Oxc
45. The Oxidation Compiler • JavaScript / TypeScript ޲͚ͷϋΠύϑΥʔϚϯεͷπʔϧ܊ Λ Rust Ͱ࣮૷ͨ͠΋ͷΛఏڙ͢ΔΦʔϓϯιʔεϓϩδΣΫτ • parser • linter • formatter • transpiler • mini fi er • type checker https://github.com/oxc-project/oxc ࡞ऀ͸ Bytedance ͷ Rspack νʔϜͷਓ
46. ࢥ૝ • Biome (چ: Rome) ΍ Ruff ͱಉ͡ • Biome: https://biomejs.dev/blog/annoucing-biome Oxc ΋πʔϧνΣΠϯΛ౷߹ͯ͠རศੑΛఏڙ͢Δ https://oxc-project.github.io/docs/guide/introduction.html
47. Biome ͱͷҧ͍ • Biome • JS / TS ͚ͩͰͳ͘ Web ։ൃʹؔ͢Δݴޠશൠ޲͚ ͷπʔϧνΣΠϯ • ઃఆΛۃྗݮΒ͠ɺσϑΥϧτϕʔεͳπʔϧΛ૝ఆ • Oxc • JS / TS ޲͚ͷπʔϧνΣΠϯͱͯ͠ϑΥʔΧε • πʔϧΛ֦ுͰ͖Δ͜ͱΛ૝ఆ https://zenn.dev/cybozu_frontend/articles/thinking-about-oxc
48. Parser & Lint ύϑΥʔϚϯε
49. Oxc ͸ crate Λఏڙ͍ͯ͠Δ • ͍͔ͭ͘ఏڙ͍ͯ͠Δ crate Λར༻͢Δ͜ͱͰࣗ෼ ͰπʔϧνΣʔϯΛ࡞Δ͜ͱ΋Ͱ͖Δ • oxc_ast: 
 estree like ͳ AST ޲͚ͷϥΠϒϥϦ • oxc_parser: 
 JS / TS parser ϥΠϒϥϦ • And etc …
50. Oxc Playground Λࢼ͢͜ͱ͕Ͱ͖Δ https://oxc-project.github.io/oxc/playground
51. Oxc ͷݱঢ় https://github.com/oxc-project/oxc/issues/481 • ݱঢ় Linter ʹϑΥʔΧε͠ ͍ͯΔ໛༷ • Lintͷϧʔϧ͸ɺΑ͘࢖ΘΕ ͍ͯΔ ESLint / typescript- eslint ͷ recommended ϧʔ ϧΛఏڙ͢Δ༧ఆ • ϓϥάΠϯΞʔΩςΫνϟ ͸ɺGraphQL αϒηοτʹ ͍ۙ Trustfall Λ࠾༻͢Δ༧ ఆ
52. VSCode ͷ֦ு͕ఏڙ͞Ε͍ͯΔ • ͍ͭ࠷ۙ VSCode ֦ுΛఏڙ࢝͠Ίͨ https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode
53. ଞͷπʔϧঢ়گ • Mini fi er • WIP: ϓϩτλΠϐϯάத • Transpiler • WIP: https://github.com/web-infra-dev/oxc/issues/974 • Formatter • Ϧιʔε͕଍Γͳͯ͘ख͕͚͍ͭͯͳ͍ঢ়گ • Type Checker • Ezno Λ࢖͍ͬͯΔ͕·ͩ experimental
54. Oxc ͷࠓޙ • શମͷϩʔυϚοϓ͕ͳ͍ͨΊݸਓతݟղ • ίϛϡχςΟΛר͖ࠐΜͰπʔϧνΣΠϯΛ࣮૷ ͯ͠ఏڙ͍ͯ͘͠ͱࢥΘΕΔ • Boshen ࢯ͸ Twitter (ݱ: X)ɺGitHub ͱ͍ͬͨ SNS ΛΑ͘࢖ͬͯίϛϡχέʔγϣϯ͠ͳ͕Βר ͖ࠐΜͰ͍Δ
55. JS πʔϧνΣΠϯΛ࡞Γ͍ͨਓ޲͚ʹΨΠυ͕͋Δ https://oxc-project.github.io/javascript-parser-in-rust/
56. πʔϧνΣΠϯͷಈ޲
57. • Rust ͳͲͷݴޠʹΑΔωΟςΟϒԽʹΑΔஔ׵͑ • Parser • Bundler • Formatter • Linter • Loader • … and etc ࠷ۙͷ JavaScript πʔϧք۾ͷτϨϯυ
58. طଘπʔϧνΣΠϯͷωΠςΟϒԽͷࢼΈ • ESLint ͸ݕূͯ͠Έͨ݁Ռɺ೉͔ͬͨ͠໛༷… https://twitter.com/slicknet/status/1729157481207824702 AST ͷ(σ)γϦΞϥΠζͷίετ͕ωΠςΟϒԽͯ͠΋ ϖΠ͠ͳ͍
59. ͪͳΈʹ Rollup v4 Ͱ΋ۤઓ͍ͯ͠Δ • JS parser ͸ Acorn ͔Β SWC ʹஔ׵͕͑ͨɺॳظ ࣮૷Ͱ͸͋·ΓύϑΥʔϚϯε͕Ͱ͍ͯͳͬͨ https://github.com/rollup/rollup/issues/5182
60. 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 ʹهࡌ͞ΕͨϕϯνϚʔΫ݁Ռ
61. πʔϧνΣΠϯͷ Rust ԽͷΩʔϙΠϯτ͸ʁ • JavaScript ޲͚ͷπʔϧνΣΠϯ͸ίʔυղੳͱ AST Λॲཧ͢Δπʔϧ͕΄ͱΜͲ • JavaScript ʙ ωΟςΟϒؒͰ΍ΓͱΓ͢ΔAST ͷ (σ)γϦΞϥΠζΦʔόϔουΛ೗Կʹ཈͑ͯϚϧ νίΞԽͰ͖Δ͔ https://zenn.dev/hd_nvim/articles/09483b0155ebb6 Herrington Darkholme ࢯʹΑΔTypeScript ParserͷύϑΥʔϚϯεܭଌΑΓ
62. ৽͍͠πʔϧνΣΠϯ΁ͷҠߦ͸Ճ଎͢Δʁ • ৽نϓϩδΣΫτ͸ɺطଘπʔϧνΣΠϯʹ͕͠Β Έ͕ͳ͍ͷͰ࠾༻͍ͯ͘͠ྲྀΕ͸ى͖ͦ͏ • தখن໛ͷϓϩδΣΫτͷέʔε͸ɺ৽͍͠πʔϧ νΣΠϯͷ DX ʹΑͬͯɺҠߦίετ͕ϖΠͰ͖Δ ͳΒɺஔ׵͑ͷྲྀΕ͸ى͖ͦ͏
63. ৽͍͠πʔϧνΣΠϯ΁ͷҠߦ͸Ճ଎͢Δʁ • େن໛ϓϩδΣΫτͷ৔߹͸ɺ৽͍͠πʔϧνΣΠϯ ΁ͷҠߦ͸͙͢ʹͰ͖ͳ͍ɺͦ͏؆୯Ͱ͸ͳ͍ • JavaScript πʔϧνΣΠϯपΓͷΤίγεςϜ͸ϓϥ άΠϯʹΑͬͯ੒Γཱ͍ͬͯΔͷ͕ଟ͍ • ಛʹ ESLintɺVite / WebpackɺBabel ͳͲͷϓϥάΠ ϯ͸ JavaScript Ͱ࣮૷͞Ε͍ͯΔ • Ҡߦ͢Δ͔Ͳ͏͔ɺͦͷπʔϧνΣΠϯ͕طଘπʔϧ νΣΠϯͱޓ׵ੑɺ૬ޓӡ༻͕͋Δ͔Ͳ͏͔࣍ୈͩͱ ࢥ͏
64. ωΟςΟϒԽʹର͢ΔΞϯνςʔθͳಈ͖΋Ͱ͖ͯͨ • tapjs/tsimp 
 Node.js Ͱ TS ͷίʔυΛܕνΣοΫ͠ͳ͕Βίϯ ύΠϧͰ͖Δ loader https://github.com/tapjs/tsimp
65. ωΟςΟϒԽʹର͢ΔΞϯνςʔθͳಈ͖΋Ͱ͖ͯͨ • Prettier 
 CLI ଆͷϑΝΠϧݕࡧ΍ parse ͷվળɺΩϟογϡ ͳͲʹΑΔ஍ಓͳվળ https://prettier.io/blog/2023/11/30/cli-deep-dive
66. Vue.js ͱ Rust
67. Vue ʹ Rust Խͷ೾͸΍ͬͯ͘Δʁ • ݸਓతݟղ: ΍ͬͯ͘Δͱࢥ͍·͢ https://github.com/vuejs/rfcs/discussions/369#discussioncomment-1192421 ͳͥͳΒɺ GitHub Discussions ͦͯ͠ Vue Fes Japan Ͱ΋ Rust Խʹ͍ͭͯ΋ݴٴͨ͠
68. Vue ͷ Rust Խ͸Ͳ͜ʹདྷΔͷ͔ • Vue ͸ JavaScript ϑϨʔϜϫʔΫ • UI Λ Web ΞϓϦέʔγϣϯͱͯ͠ߏங͢ΔͨΊͷϑ ϨʔϜϫʔΫ • Vue ͷ Rust Խ͕ཁٻ͞ΕΔ෦෼͸ҎԼͷ෦෼ • Vue Compiler • … ͳͲͷύϑΥʔϚϯε͕ཁٻ͞ΕΔ෦෼
69. ࣮͸ Rust ੡ Vue Compiler ͕͋Δʂ • Vue ίϛϡχςΟͷਓ͕ ࡞͍ͬͯΔ • ࡞ͬͨਓ͸ Vue ίΞ νʔϜͰҎલ Vue ͷ TS पΓΛ͔ͳΓ Contribute ͍ͯͨ͠ 
 Herrington Darkholme ࢯ • ࠓޙϕʔεʹͳΔՄೳੑ ͸͋Δ͔΋ https://github.com/HerringtonDarkholme/vue-compiler
70. ·ͱΊ
71. ·ͱΊ (1/4) • Rolldown ͷঢ়گʹ͍ͭͯ࿩ͨ͠ • ݱঢ়ελʔτͨ͠͹͔ΓͰ·ͩ stage 1 • Rolldown ͱίϥϘ͍ͯ͠Δ Rspack νʔϜ (web-infra-dev) ʹͭ ͍ͯ࿩ͨ͠ • ༷ʑͳ Rust Ͱ࡞ΒΕͨ OSS Λఏڙ͍ͯ͠Δ • Rspack ͸ Rust Ͱ Webpack ͷޓ׵ੑ & ૬ޓӡ༻ੑΛߟྀ͠ ͭͭύϑΥʔϚϯε͕ಘΒΕΔΑ͏ʹ࡞ΒΕ͍ͯΔ • ϓϥάΠϯΛ࣋ͭ JavaScript πʔϧνΣΠϯΛಈ࡞ͤ͞Δ࣮ ੷Λ࣋ͪͭͭ͋Δ
72. ·ͱΊ (2/4) • Rolldown Ͱ࢖͏ JS Parser ͷ Oxc ʹ͍ͭͯ࿩ͨ͠ • Oxc ͸ JS / TS ޲͚ʹ Rust ͰϋΠύϑΥʔϚϯε ͳπʔϧνΣΠϯΛఏڙ͢ΔϓϩδΣΫτ • Oxc ͸֦ுੑΛҙࣝͯ͠πʔϧ୯ಠ͚ͩͰͳ͘ crate ͳͲʹΑͬͯ API Λఏڙ͍ͯ͠Δ • Rolldown ΛؚΊͨଞͷίϛϡχςΟͱͷίϥϘ Λҙࣝͯ͠ϓϩδΣΫτ͕֦େ͍ͯ͘͠ͱظ଴
73. ·ͱΊ (3/4) • πʔϧνΣΠϯͷಈ޲ʹ͍ͭͯݟղΛ࿩ͨ͠ • JavaScript πʔϧք۾Ͱ͸ωΟςΟϒԽ͕τϨϯυʹͳ͍ͬͯΔ • ͨͩɺطଘπʔϧνΣΠϯͷωΟςΟϒԽ͸೉͍͠ • ίϛϡχςΟ͕৽͍͠πʔϧνΣΠϯ΁Ҡߦ͢Δʹ͸ɺطଘπʔϧ νΣΠϯ͕ޓ׵ੑ & ૬ޓӡ༻ੑΛαϙʔτͭͭ͠ɺ೗ԿʹύϑΥʔ ϚϯεΛվળͰ͖Δ͔͕ϙΠϯτ • ωΟςΟϒԽʹର͢Δ JavaScript ίϛϡχςΟͷΞϯνςʔθͳಈ ͖΋͋Δ • πʔϧνΣΠϯ͸ࠓޙ͸ͦͷΑ͏ͳಈ͖ͷதɺք۾ͰܹࢗΛ͏͚ͳ ͕Βզʑʹఏڙ͞Ε͍ͯ͘ͱ༧૝͞ΕΔ
74. ·ͱΊ (4/4) • Vue ͷ Rust Խ ʹ͍ͭͯ࿩ͨ͠ • Vite ͷ Rolldown Ͱ Evan ࢯ΋ Rust Խʹ޲͚ͯε λʔτ͍ͯ͠Δ • Vue ίϛϡχςΟʹΑͬͯ͢Ͱʹ Vue Compiler ͕͋Δ • ࠓޙ Vite ͷ Rolldown ͦͯ͠ Oxc ͷ൓ڹ͕ Vue ΍ΤίγεςϜʹ΋΍ͬͯ͘Δͱظ଴Ͱ͖Δ
75. ࠷ޙʹ • Vue Fes Japan 2024 ։࠵͠·͢ʂ • Vue Fes ίΞελοϑืूͯ͠·͢ʂϦϞʔτͰ΋ ׆ಈͰ͖ΔͷͰࢀՃՄೳͰ͢ʂ • ڵຯ͕͋Δํ͸ɺ࠙਌ձ੠͔͚͍ͯͩ͘͞ʂ
76. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ❤