Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue & Vite Rustify
Search
kazupon
December 04, 2023
Programming
4
2.2k
Vue & Vite Rustify
kazupon
December 04, 2023
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
2
330
Vapor Revolution
kazupon
3
3.1k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.6k
Vue.jsエコシステム動向2023
kazupon
17
7.6k
Reactivity Transform
kazupon
1
1.3k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
580
Other Decks in Programming
See All in Programming
React 19アップデートのために必要なこと
uhyo
5
880
CI改善もDatadogとともに
taumu
0
180
Conform を推す - Advocating for Conform
mizoguchicoji
3
710
昭和の職場からアジャイルの世界へ
kumagoro95
1
410
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
140
Better Code Design in PHP
afilina
0
130
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
AIプログラミング雑キャッチアップ
yuheinakasaka
9
1.5k
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
830
Ruby on cygwin 2025-02
fd0
0
170
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
Featured
See All Featured
Scaling GitHub
holman
459
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Code Reviewing Like a Champion
maltzj
521
39k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Thoughts on Productivity
jonyablonski
69
4.5k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Documentation Writing (for coders)
carmenintech
67
4.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Transcript
Vue & Vite Rustify Vue Fes Japan 2023 After Meetup
2023-11-07 (ϝυϐΞגࣜձࣾ x MNTSQגࣜձࣾ x גࣜձࣾ hacomono) 2023-12-03 (FukuokaJS x LINEϠϑʔίϛϡχέʔγϣϯζגࣜձࣾ) @kazupon
ࣗݾհ
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
ࠓ͢͜ͱ
ΞδΣϯμ • Vue Fes Japan 2023 ͷৼΓฦΓ • Rolldown •
ίϥϘϨʔγϣϯ͍ͯ͠ΔRspack νʔϜͱOSS • Oxc • πʔϧνΣΠϯͷಈ • Vue ʹ Rust ͷͬͯ͘Δʁ
Vue Fes Japan 2023
• 2023/10/28 ͍ͭʹ5ͿΓͷΦϑϥΠϯ։࠵ʂ Vue Fes Japan 2023
ΞϑλʔϜʔϏʔ • ΞϑλʔϜʔϏʔ͕Ͱ͖ͨͷͰྲྀ͠·͢ https://www.youtube.com/watch?v=rWIal-epFXQ
State of Vue Fes Japan 2023 • શࢀՃऀ: 583 ໊
• ηογϣϯ: 33 (ຊηογϣϯ + LTηογϣϯ) • εϙϯαʔ: 46 • ݸਓεϙϯαʔ: 44 ໊ • ΞϑλʔύʔςΟʔࢀՃऀ: 300 ໊ (ຬ੮)
Πϕϯτ & ࠵͠ • ϋϯζΦϯ • ύωϧςΟΧογϣϯ • Vue.js ΫϦχοΫ
(Q & A) • ΫϦΤΠςΟϒΥʔϧ • Vue Fes Store (άοζ) • ελϯϓϥϦʔ & λτΡʔ
Ωʔϊʔτ • Vue 2 ͔Β Vue 3 ͷৼΓฦΓͱ Vue ͷࠓޙʹ͍ͭͯ
• Vite ͷࠓޙʹ͍ͭͯ
Ωʔϊʔτ ཁ
Ωʔϊʔτલ • Vue 2 ͔Β Vue 3 ͷҠߦͷৼΓฦΓ • ؒҧ͍͔ΒͷֶͼɺऔΓΜͩ͜ͱͦͯ͠͏·͘
͍ͬͨ͜ͱʹ͍ͭͯͨ͠ ؒҧ͍ͱֶͼɺͦͯ͠͏·͍ͬͨ͘͜ͱͷέʔεͷҰྫ
Ωʔϊʔτલ • Vue ͷࠓޙʹ͍ͭͯ • Vue 3.4 alpha • computed
property ͷվળ • Reactivity Transform ͷআ • TSͷܕपΓͷվળ • …ͳͲ
Ωʔϊʔτલ • Vue ͷࠓޙʹ͍ͭͯ • Vue 3.5 ͷϩʔυϚοϓ • SSR
पΓ (Suspence / Lazy hydration) ͷվળ • Custom Elements (Web Components) ͷվળ • … ͳͲ • Vapor Ϟʔυ • virtual dom ΛΘͳ͍ runtime-less ͳ৽͍͠ίϯύΠϧϞʔυ • 2024 1Q / 2Q ༧ఆ
Ωʔϊʔτޙ • Vite ͷࠓޙʹ͍ͭͯ • Vite ͷ՝Λղܾ͢ΔͨΊʹ Rust Խʹྗ͍ͯ͠ ͘ͱݴٴ
• Rolldown • Rust ʹΑͬͯωΠςΟϒ࣮͞Εͨ Rollup ޓ ͷόϯυϥʔ • Vite ͷ Rust ԽϩʔυϚοϓʹैͬͯஈ֊తʹ ߦ͍ͬͯ͘
Rolldown
Rolldownͱ • Vite ෦Ͱ͍ͬͯΔ Rollup Λ Rust Խͨ͠ͷ • త:
Rollup ͱͳΔ͘ಉ͡ڍಈʹͳΔΑ͏ޓੑΛҡ࣋ ͭͭ͠ϏϧυύϑΥʔϚϯεΛఏڙ͢Δ • ΰʔϧ: Vite Λ͏Ϣʔβʔʹ࠷খݶͷӨڹͰ Rollup Λ ஔ͖͑Δ
ͳͥ RolldownΛ࡞Δͷ͔
Vite ๊͕͑Δ՝Λղܾ͍ͨ͠ • production Ϗϧυ͕͍ • development ͱ production ͱͷόϯυϧͷҰ؏ੑ
• development ʹ͓͍ͯൃੜ͢ΔωοτϫʔΫΦʔ όʔϔου • νϟϯΫׂ (code chunk split) ੍ޚʹ੍ݶ͕͋Δ • ϞδϡʔϧϑΣσϨʔγϣϯ͕ͳ͍
Vite ๊͕͑Δ՝Λղܾ͍ͨ͠ • production Ϗϧυ͕͍ • development ͱ production ͱͷόϯυϧͷҰ؏ੑ
• development ʹ͓͍ͯൃੜ͢ΔωοτϫʔΫΦʔ όʔϔου • νϟϯΫׂ (code chunk split) ੍ޚʹ੍ݶ͕͋Δ • ϞδϡʔϧϑΣσϨʔγϣϯ͕ͳ͍
production Ϗϧυ͕͍ • Rollup JS ࣮Ͱ͍ • ͨͩɺJS γϯάϧεϨουɺΠϕϯτۦಈ
• όϯυϧ CPU ϔϏʔ • όϯυϧ͢Δྔ͕ଟ͘ͳͬͯ͘ΔͱɺJS ͷ parse ɺtransformɺmi fi nifyɺsource-mapͱ͍ͬͨ ॲཧ͕ελοΫͯ͠͠·͍͘ͳΔ
development ͱ production ͱͷόϯυϧҰ؏ੑ • development Ͱ esbuild ͕ΘΕΔ •
naitive & ϚϧνεϨουʹΑΓϏϧυ͍ʂ • asset ࠷దԽपΓͷ੍ޚʹ੍ݶ͕͋Δ • Plugin API ͕ॊೈͰͳ͍
development ͱ production ͱͷόϯυϧҰ؏ੑ • production Ͱ Rollup Λͬͯόϯυϧ͢Δ •
Plugin API ॊೈ! ͯ͢JavaScript! • ESM/CJS ޓΛվળͰ͖Δ • ͨͩ esbuild ͱൺΔͱ͍
development ͱ production ͱͷόϯυϧҰ؏ੑ • production Ͱ Rollup Λͬͯόϯυϧ͢Δ •
Plugin API ॊೈ! ͯ͢JavaScript! • ESM/CJS ޓΛվળͰ͖Δ • ͨͩ esbuild ͱൺΔͱ͍ ͦΕͧΕͷॴΛར༻͍ͯ͠ΔͨΊɺesbuild͘͠ଞͷ navite bundlerʹϦϓϨʔεͰ͖ͳ͍...
Rolldown ͷ։ൃ
Rolldown ։ൃঢ়گ • status: • εςʔδ1: (Vue Fes 2023
Ͱݴٴͨ͠ϩʔυϚοϓͷ 1/4) • Rspack νʔϜͦͯ͠ Rollup ͷίΞϝϯςφͱ͍ͬ ͠ΐʹίϥϘϨʔγϣϯ͠ͳ͕Β։ൃ͍ͯ͠Δ
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
Rolldown ͷςετ • Rolldown ͷςετɺطଘͷ Rollup ͷ Test fi xtures
& Test ίʔυΛͬͯςετ͍ͯ͠Δ
Demo: Rolldown on Vite • ϒϥβ্Ͱ Rolldown (wasm) Ͱόϯυϧ͢ΔσϞ
ίϥϘ͍ͯ͠Δ RspackνʔϜʹ͍ͭͯ
RspackνʔϜ • Rspack Λ։ൃ͍ͯ͠ΔνʔϜ • Rspack Bytedance ͷ web-infra-dev
ͱ͍͏ϑϩ ϯτΤϯυπʔϧνΣʔϯपΓͷ OSS ͷҰ෦
web-infra-dev
web-infra-dev ͱ • Bytedance͕ࣗࣾͷʹ͚ͯɺϑϩϯτΤϯυ ٕज़͚ʹΦʔϓϯͳٕज़ΤίγεςϜΛߏங͢Δ ͜ͱΛతͱͯ͠׆ಈ͍ͯ͠Δ Web: https://webinfra.org/ GitHub: https://github.com/web-infra-dev
web-infra-dev ৭ʑ OSS ࡞͍ͬͯΔ • Rust Rspack Λϕʔε &
ίΞपΓͷ৭ʑͳ OSS Λఏڙ͍ͯ͠Δ
web-infra-devΦʔϓϯʹใެ։͍ͯ͠Δ • ઃܭಛఆͷٕज़Λௐͨ͜ͱΛΦʔϓϯ͍ͯ͠Δ https://github.com/orgs/web-infra-dev/discussions/9
Rspack
Rspack • WebpackΤίγεςϜͱ૬ޓӡ༻Λఏڙ͢ΔRust ߴόϯυϥʔ https://www.rspack.dev/
Rspack ͕ੜ·Εͨഎܠ • Bytedance͕ࣗͨͪͷϏϧυύϑΥʔϚϯεΛվ ળ͢ΔͨΊʹ࡞ͬͨ • ϞϊϦγοΫͳϓϩδΣΫτͰ20ʙ30͔͔ͬ ͍ͯͨ • 20224݄͔Β։ൃ։࢝ɺ20233݄OSSͱͯ͠ެ
։
Webpack ͷ͍ͬ͠ΐʹվળ • Webpack ͷͰ͋ͬͨ dev αʔόىಈ͍ ωΟςΟϒΛར༻্ཱͯ͠Γ͕͘ͳ͍ͬͯΔ • ϓϩμΫγϣϯϏϧυߴԽ
https://www.rspack.dev/misc/benchmark.html#data
HMR ߴԽ • 10,000 React ίϯϙʔωϯτͷέʔε: https://www.rspack.dev/misc/benchmark.html#data-1
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
Rspackͷࠓޙ • ݱ࣌Ͱwebpackͷͯ͢ͷػೳຬ͍ͨͯ͠Δ Θ͚Ͱͳ͍ • ίϛϡχςΟͱͷίϥϘϨʔγϣϯʹΑͬͯϑΟʔ υόοΫΛಘͭͭɺύϨʔτͷ๏ଇʹج͍ͮͯඞཁ ͳΛऔΓೖΕͯఏڙ͍ͯ͘͠ • ϓϥάΠϯػೳΛڧԽ͍ͯ͘͠
• ܧଓతͳύϑΥʔϚϯεͷ্
Oxc
The Oxidation Compiler • JavaScript / TypeScript ͚ͷϋΠύϑΥʔϚϯεͷπʔϧ܊ Λ Rust
Ͱ࣮ͨ͠ͷΛఏڙ͢ΔΦʔϓϯιʔεϓϩδΣΫτ • parser • linter • formatter • transpiler • mini fi er • type checker https://github.com/oxc-project/oxc ࡞ऀ Bytedance ͷ Rspack νʔϜͷਓ
ࢥ • Biome (چ: Rome) Ruff ͱಉ͡ • Biome:
https://biomejs.dev/blog/annoucing-biome Oxc πʔϧνΣΠϯΛ౷߹ͯ͠རศੑΛఏڙ͢Δ https://oxc-project.github.io/docs/guide/introduction.html
Biome ͱͷҧ͍ • Biome • JS / TS ͚ͩͰͳ͘ Web
։ൃʹؔ͢Δݴޠશൠ͚ ͷπʔϧνΣΠϯ • ઃఆΛۃྗݮΒ͠ɺσϑΥϧτϕʔεͳπʔϧΛఆ • Oxc • JS / TS ͚ͷπʔϧνΣΠϯͱͯ͠ϑΥʔΧε • πʔϧΛ֦ுͰ͖Δ͜ͱΛఆ https://zenn.dev/cybozu_frontend/articles/thinking-about-oxc
Parser & Lint ύϑΥʔϚϯε
Oxc crate Λఏڙ͍ͯ͠Δ • ͍͔ͭ͘ఏڙ͍ͯ͠Δ crate Λར༻͢Δ͜ͱͰࣗ ͰπʔϧνΣʔϯΛ࡞Δ͜ͱͰ͖Δ •
oxc_ast: estree like ͳ AST ͚ͷϥΠϒϥϦ • oxc_parser: JS / TS parser ϥΠϒϥϦ • And etc …
Oxc Playground Λࢼ͢͜ͱ͕Ͱ͖Δ https://oxc-project.github.io/oxc/playground
Oxc ͷݱঢ় https://github.com/oxc-project/oxc/issues/481 • ݱঢ় Linter ʹϑΥʔΧε͠ ͍ͯΔ༷ • LintͷϧʔϧɺΑ͘ΘΕ
͍ͯΔ ESLint / typescript- eslint ͷ recommended ϧʔ ϧΛఏڙ͢Δ༧ఆ • ϓϥάΠϯΞʔΩςΫνϟ ɺGraphQL αϒηοτʹ ͍ۙ Trustfall Λ࠾༻͢Δ༧ ఆ
VSCode ͷ֦ு͕ఏڙ͞Ε͍ͯΔ • ͍ͭ࠷ۙ VSCode ֦ுΛఏڙ࢝͠Ίͨ https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode
ଞͷπʔϧঢ়گ • Mini fi er • WIP: ϓϩτλΠϐϯάத • Transpiler
• WIP: https://github.com/web-infra-dev/oxc/issues/974 • Formatter • Ϧιʔε͕Γͳͯ͘ख͕͚͍ͭͯͳ͍ঢ়گ • Type Checker • Ezno Λ͍ͬͯΔ͕·ͩ experimental
Oxc ͷࠓޙ • શମͷϩʔυϚοϓ͕ͳ͍ͨΊݸਓతݟղ • ίϛϡχςΟΛר͖ࠐΜͰπʔϧνΣΠϯΛ࣮ ͯ͠ఏڙ͍ͯ͘͠ͱࢥΘΕΔ • Boshen ࢯ
Twitter (ݱ: X)ɺGitHub ͱ͍ͬͨ SNS ΛΑͬͯ͘ίϛϡχέʔγϣϯ͠ͳ͕Βר ͖ࠐΜͰ͍Δ
JS πʔϧνΣΠϯΛ࡞Γ͍ͨਓ͚ʹΨΠυ͕͋Δ https://oxc-project.github.io/javascript-parser-in-rust/
πʔϧνΣΠϯͷಈ
• Rust ͳͲͷݴޠʹΑΔωΟςΟϒԽʹΑΔஔ͑ • Parser • Bundler • Formatter •
Linter • Loader • … and etc ࠷ۙͷ JavaScript πʔϧք۾ͷτϨϯυ
طଘπʔϧνΣΠϯͷωΠςΟϒԽͷࢼΈ • ESLint ݕূͯ͠Έͨ݁Ռɺ͔༷ͬͨ͠… https://twitter.com/slicknet/status/1729157481207824702 AST ͷ(σ)γϦΞϥΠζͷίετ͕ωΠςΟϒԽͯ͠ ϖΠ͠ͳ͍
ͪͳΈʹ Rollup v4 Ͱۤઓ͍ͯ͠Δ • JS parser Acorn ͔Β
SWC ʹஔ͕͑ͨɺॳظ ࣮Ͱ͋·ΓύϑΥʔϚϯε͕Ͱ͍ͯͳͬͨ https://github.com/rollup/rollup/issues/5182
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 ʹهࡌ͞ΕͨϕϯνϚʔΫ݁Ռ
πʔϧνΣΠϯͷ Rust ԽͷΩʔϙΠϯτʁ • JavaScript ͚ͷπʔϧνΣΠϯίʔυղੳͱ AST Λॲཧ͢Δπʔϧ͕΄ͱΜͲ • JavaScript
ʙ ωΟςΟϒؒͰΓͱΓ͢ΔAST ͷ (σ)γϦΞϥΠζΦʔόϔουΛԿʹ͑ͯϚϧ νίΞԽͰ͖Δ͔ https://zenn.dev/hd_nvim/articles/09483b0155ebb6 Herrington Darkholme ࢯʹΑΔTypeScript ParserͷύϑΥʔϚϯεܭଌΑΓ
৽͍͠πʔϧνΣΠϯͷҠߦՃ͢Δʁ • ৽نϓϩδΣΫτɺطଘπʔϧνΣΠϯʹ͕͠Β Έ͕ͳ͍ͷͰ࠾༻͍ͯ͘͠ྲྀΕى͖ͦ͏ • தখنͷϓϩδΣΫτͷέʔεɺ৽͍͠πʔϧ νΣΠϯͷ DX ʹΑͬͯɺҠߦίετ͕ϖΠͰ͖Δ ͳΒɺஔ͑ͷྲྀΕى͖ͦ͏
৽͍͠πʔϧνΣΠϯͷҠߦՃ͢Δʁ • େنϓϩδΣΫτͷ߹ɺ৽͍͠πʔϧνΣΠϯ ͷҠߦ͙͢ʹͰ͖ͳ͍ɺͦ͏؆୯Ͱͳ͍ • JavaScript πʔϧνΣΠϯपΓͷΤίγεςϜϓϥ άΠϯʹΑͬͯΓཱ͍ͬͯΔͷ͕ଟ͍ • ಛʹ
ESLintɺVite / WebpackɺBabel ͳͲͷϓϥάΠ ϯ JavaScript Ͱ࣮͞Ε͍ͯΔ • Ҡߦ͢Δ͔Ͳ͏͔ɺͦͷπʔϧνΣΠϯ͕طଘπʔϧ νΣΠϯͱޓੑɺ૬ޓӡ༻͕͋Δ͔Ͳ͏͔࣍ୈͩͱ ࢥ͏
ωΟςΟϒԽʹର͢ΔΞϯνςʔθͳಈ͖Ͱ͖ͯͨ • tapjs/tsimp Node.js Ͱ TS ͷίʔυΛܕνΣοΫ͠ͳ͕Βίϯ ύΠϧͰ͖Δ loader
https://github.com/tapjs/tsimp
ωΟςΟϒԽʹର͢ΔΞϯνςʔθͳಈ͖Ͱ͖ͯͨ • Prettier CLI ଆͷϑΝΠϧݕࡧ parse ͷվળɺΩϟογϡ ͳͲʹΑΔಓͳվળ https://prettier.io/blog/2023/11/30/cli-deep-dive
Vue.js ͱ Rust
Vue ʹ Rust Խͷͬͯ͘Δʁ • ݸਓతݟղ: ͬͯ͘Δͱࢥ͍·͢ https://github.com/vuejs/rfcs/discussions/369#discussioncomment-1192421 ͳͥͳΒɺ GitHub
Discussions ͦͯ͠ Vue Fes Japan Ͱ Rust Խʹ͍ͭͯݴٴͨ͠
Vue ͷ Rust ԽͲ͜ʹདྷΔͷ͔ • Vue JavaScript ϑϨʔϜϫʔΫ •
UI Λ Web ΞϓϦέʔγϣϯͱͯ͠ߏங͢ΔͨΊͷϑ ϨʔϜϫʔΫ • Vue ͷ Rust Խ͕ཁٻ͞ΕΔ෦ҎԼͷ෦ • Vue Compiler • … ͳͲͷύϑΥʔϚϯε͕ཁٻ͞ΕΔ෦
࣮ Rust Vue Compiler ͕͋Δʂ • Vue ίϛϡχςΟͷਓ͕ ࡞͍ͬͯΔ
• ࡞ͬͨਓ Vue ίΞ νʔϜͰҎલ Vue ͷ TS पΓΛ͔ͳΓ Contribute ͍ͯͨ͠ Herrington Darkholme ࢯ • ࠓޙϕʔεʹͳΔՄೳੑ ͋Δ͔ https://github.com/HerringtonDarkholme/vue-compiler
·ͱΊ
·ͱΊ (1/4) • Rolldown ͷঢ়گʹ͍ͭͯͨ͠ • ݱঢ়ελʔτ͔ͨ͠ΓͰ·ͩ stage 1 •
Rolldown ͱίϥϘ͍ͯ͠Δ Rspack νʔϜ (web-infra-dev) ʹͭ ͍ͯͨ͠ • ༷ʑͳ Rust Ͱ࡞ΒΕͨ OSS Λఏڙ͍ͯ͠Δ • Rspack Rust Ͱ Webpack ͷޓੑ & ૬ޓӡ༻ੑΛߟྀ͠ ͭͭύϑΥʔϚϯε͕ಘΒΕΔΑ͏ʹ࡞ΒΕ͍ͯΔ • ϓϥάΠϯΛ࣋ͭ JavaScript πʔϧνΣΠϯΛಈ࡞ͤ͞Δ࣮ Λ࣋ͪͭͭ͋Δ
·ͱΊ (2/4) • Rolldown Ͱ͏ JS Parser ͷ Oxc ʹ͍ͭͯͨ͠
• Oxc JS / TS ͚ʹ Rust ͰϋΠύϑΥʔϚϯε ͳπʔϧνΣΠϯΛఏڙ͢ΔϓϩδΣΫτ • Oxc ֦ுੑΛҙࣝͯ͠πʔϧ୯ಠ͚ͩͰͳ͘ crate ͳͲʹΑͬͯ API Λఏڙ͍ͯ͠Δ • Rolldown ΛؚΊͨଞͷίϛϡχςΟͱͷίϥϘ Λҙࣝͯ͠ϓϩδΣΫτ͕֦େ͍ͯ͘͠ͱظ
·ͱΊ (3/4) • πʔϧνΣΠϯͷಈʹ͍ͭͯݟղΛͨ͠ • JavaScript πʔϧք۾ͰωΟςΟϒԽ͕τϨϯυʹͳ͍ͬͯΔ • ͨͩɺطଘπʔϧνΣΠϯͷωΟςΟϒԽ͍͠ •
ίϛϡχςΟ͕৽͍͠πʔϧνΣΠϯҠߦ͢Δʹɺطଘπʔϧ νΣΠϯ͕ޓੑ & ૬ޓӡ༻ੑΛαϙʔτͭͭ͠ɺԿʹύϑΥʔ ϚϯεΛվળͰ͖Δ͔͕ϙΠϯτ • ωΟςΟϒԽʹର͢Δ JavaScript ίϛϡχςΟͷΞϯνςʔθͳಈ ͖͋Δ • πʔϧνΣΠϯࠓޙͦͷΑ͏ͳಈ͖ͷதɺք۾ͰܹΛ͏͚ͳ ͕Βզʑʹఏڙ͞Ε͍ͯ͘ͱ༧͞ΕΔ
·ͱΊ (4/4) • Vue ͷ Rust Խ ʹ͍ͭͯͨ͠ • Vite
ͷ Rolldown Ͱ Evan ࢯ Rust Խʹ͚ͯε λʔτ͍ͯ͠Δ • Vue ίϛϡχςΟʹΑͬͯ͢Ͱʹ Vue Compiler ͕͋Δ • ࠓޙ Vite ͷ Rolldown ͦͯ͠ Oxc ͷڹ͕ Vue ΤίγεςϜʹͬͯ͘ΔͱظͰ͖Δ
࠷ޙʹ • Vue Fes Japan 2024 ։࠵͠·͢ʂ • Vue Fes
ίΞελοϑืूͯ͠·͢ʂϦϞʔτͰ ׆ಈͰ͖ΔͷͰࢀՃՄೳͰ͢ʂ • ڵຯ͕͋Δํɺ࠙ձ͔͚͍ͯͩ͘͞ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ❤