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.1k
Vue & Vite Rustify
kazupon
December 04, 2023
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
1.4k
Vue 3.4
kazupon
13
4.4k
Vue.jsエコシステム動向2023
kazupon
17
7.4k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
980
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
540
まちにまった Vue.js 3
kazupon
14
5.5k
Native-ESM powered web dev build tool
kazupon
5
1.6k
Other Decks in Programming
See All in Programming
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
1
130
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
210
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
10
1.4k
型付きで行うVSCode拡張機能開発 / VSCode Meetup #31
mazrean
0
240
ROS 2のZenoh対応とZenohのROS 2対応
takasehideki
2
300
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
520
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
130
クラウドサービスの 利用コストを削減する技術 - 円安の真南風を感じて -
pyama86
3
390
Jakarta EE as Seen Trough the Lens of the ASF
ivargrimstad
0
160
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
210
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
140
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
130
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Clear Off the Table
cherdarchuk
91
320k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
46
4.9k
Building Applications with DynamoDB
mza
90
6k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
GraphQLとの向き合い方2022年版
quramy
43
13k
The Invisible Customer
myddelton
119
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Six Lessons from altMBA
skipperchong
26
3.4k
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
ίΞελοϑืूͯ͠·͢ʂϦϞʔτͰ ׆ಈͰ͖ΔͷͰࢀՃՄೳͰ͢ʂ • ڵຯ͕͋Δํɺ࠙ձ͔͚͍ͯͩ͘͞ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ❤