# Vite: Beyond a Build Tool - 尤雨溪 (Evan You)

{%hackmd @JSDC-tw/B1loEcwJZl %}
###### tags: `JSDC2025`

Slido：https://app.sli.do/event/j4ehzyo9v3zhouRAEFkD5A

> 開始做筆記

# Current Status
npm install vite: 40 million / week downloads

2025-07 > wepback ! :confetti_ball:
Was never thought

Lots of libraries to compose a ecosystem
Exploring the future now

storybook, playwright, laravel ... use vite

becomes **The shared infrastructure layer!**

[Vite documentory](https://www.youtube.com/watch?v=bmWQqAKLgT4)

# Challenges
Face some unique challenge

esbuild (Golang) + rollup (JS/TS) + swc (Rust) => vite

Different tech stacks, but all together, too many chunks produced
Communication between different parts

# How To Resolves
## Unify the bundler
Complicated
- Reference Webpack has its complex issue, from design
- Interupt between commonjs - ESM
- Use the third body tools to build will still face the same problem

-> STOP!

## Why build tool matters in JS first?
- Modules -> find standard -> ESM
- Too many requests
- How many paralleable
- Not all big chunk needed
- How to become reasimable chunk?
- How to handle network buddleneck
- Use new / custom system
- Scale to no typing JS
- Dev a little new feature -> build too long time!

# The OGs
- browserify -> may the first tool node to browser
- new tools come up each month!
- JavaScript is not as fast as we hope!

# The next gen
- Tools written in native language!
- ...
- Use vue, had to install deps, takes a long time

## How fast?
- Native != Fast

# Void(0)
- But it is still fragmented
- Tools contribute the artitechture it is blackbox

- Unify all toolchains!
- Oxc -> Linter in Rust

## Overview

## Why Rust?
- Simply to memory safty and perfermance
- Balance between performance ceiling and memory safety
- Already jas a very active ecosystem around js tooling
- Easier to find libraries and contributors
- Mature JS interop eg napi-rs
- Mature web assembly support

## OXC
### Progress
- Linter 600+ rules to
- Search the best tool to support vue's format
### Performance

## Rolldown
Bundling is the one of the most complicated problem
- Replace esbuild, rollup

## Vite progress to adopt native solutions
- Phase 1 vite
- deps on rolldown + oxc
- next year comes up(with vite v8)!!
- Phase 2
- Shift more bundle to Rust

## Oxlint
- ESLint is really slow ...
- Separate linting and type checking
- One cli, run syntax, type linting
- Resolving JS code to Rust, interesting issue
- Did lot of research
- Still fast JS

## Oxfmt
- Alternative to prettier
- We (void(0)) contributed a lot to prettier
- In Alpha

## Rolldown
- Different architechtures to run bundlers in diffrent speed
- Perfroemance increased dramatically! (45x then prettier)
-

# Status of productions
- Vite
- Adapt rust more
- Vitest
- Become faster
- Rolldown-Vite

# vite dev full bundle mode
- Phase 2 - Including more native bundles

# Make JS faster
- Rust is fast but
- You still want to write in JS!
- ESLint tools
- Transformers
- React
- CSS-in-JS
- Soild
- Parser JS + MagicString :rolling_on_the_floor_laughing:
- Vue
- Svelte
- But still slowing progress down
- need to minifise the overhead in JS

- eq. Handling CSS in Rust-to-JS has costs

## Oxc AST raw transfer
- One more step to transform between Rust and JS
- Sending AST from Rust to JS is slow
- AST involves calling memory
- Lazy deserilaization

Yellow part is slow in OXC transform slide

Vite+
Agent mode

# Q+A 現場
1. Business model?
2. 定制化服務 - 企業級需求 (CST)
3. 先訂製，之後做成可重複使用
4. V plus 有許可證方案
- 營收超過一個程度
6. 深度高度性能優化
- 金雞母不開源
2. React Server Component
- 價值不大 ...
- 團隊有大支持，成員 Hiroshi 為專家
- 有在使用 Waku 用量小
- RSC 的應用到底有什麼本質性的優勢？
- 心智模型變複雜
- 互相 embedded
- 安全性問題
- SQL in React Component :rolling_on_the_floor_laughing:
- Server Side 複雜，增加負擔
- Promise 的 size 不如大家期待

https://app.sli.do/event/j4ehzyo9v3zhouRAEFkD5A/live/questions

## 場外 QA

1. 有蠻多人問了關於怎麼看待 AI 影響軟體工作減少這件事

- 認為這就跟當初工業革命一樣，我們有了新工具可以省下許多重複且勞動性高的工作，就可以把精力花在有價值的產品與解決問題上面

2. 有人詢問了對於創業這件事有什麼經驗與建議，尤大的回答很實在：

- Vue 當時能從零到有一來是因爲時代對了，二來他也有喜歡做所以去把想法實踐出來，但如果是在現在這時代的話，他開玩笑的說：「我是覺得不要想不開」
- 認為如果只是因為不喜歡工作而去創業也不太會成功
- 就他自己的經驗是以前讀設計的背景，後來也學了程式，出來工作一段時間後累積一些經驗再結合以前的技能，先用 side project 的形式作出了一些成果，再 leverage 這些成果來擴大規模相對容易些
- 至少出去做 product pitch 時人家看著你過往累積的成果不會質疑這個人是不是真的能做得到
- 他自己認為他也不是一個很有毅力的人 (眾人倒抽一口氣)，但可以觀察自己在工作上感覺有得到 positive feedback 的事，朝那個方向做可能阻力比較小

---

## Slides

---

## Slido Remaining Question
1. Thanks for the work! 這邊想要請教，用別的語言改寫是趨勢，那全部改寫完一輪之後，你覺得趨勢是什麼？

2. 會建議 web 開發者開始學 Rust 建構工具嗎？還是交給 AI 來寫就好？

3. 目前這些發展中的 Oxc 工具有辦法做到 100% 跟 JS ecosystem 相容嗎？

4. 如果想加入 Build Tool 開發的話，建議從哪部分開始？

5. 想詢問剛剛提到的讓 JS plugin 能使用 vite 生態系更快是怎麼做到的？

6. magic-string 遷移到 rolldown 裡面表示以後寫 plugin 不需要再裝 magic-string 還是他會用 rust 重寫呢？

7. 會不會因為void 營利商業化導致這個工具鏈被出資方影響你們的開發方向，如何權衡？

8. 我應該幾乎不會直接使用 vite 的功能，而是靠比如說 React Router v7 framework mode 而接觸到 vite。可以簡單說說什麼情境比較會直接使用的 vite嗎？我想了解可能的應用跟需求

9. 您覺得 JavaScript 會不會被其他語言取代？例如 Rust

---

> 聊天區

---

{%hackmd @JSDC-tw/jsdc2025_sponsor %}