兄弟們，前端構(gòu)建工具領(lǐng)域發(fā)生重大變革！咱們一直用的 Vite，那個(gè)讓開發(fā)速度飛起的現(xiàn)代構(gòu)建工具，最近宣布了一項(xiàng)超重磅的更新——把一個(gè)叫 Rolldown 的打包工具集成進(jìn)來(lái)。

并且 尤雨溪 也宣布了 Vue3.6 將直接和 Rolldown 捆綁在一起了！

這玩意兒可是用 Rust 寫的，性能強(qiáng)得不行，未來(lái)要把現(xiàn)在 Vite 里用的 esbuild 和 Rollup 都給替了。

Vite 現(xiàn)在用得爽，但也有點(diǎn)小麻煩

Vite 現(xiàn)在主要靠 esbuild 來(lái)預(yù)打包依賴，靠 Rollup 來(lái)生產(chǎn)打包。

這組合確實(shí)讓構(gòu)建效率上去了，但問題也不少。

開發(fā)環(huán)境和生產(chǎn)環(huán)境用的兩套工具，有時(shí)候就不一致，bug 難找得很。而且這倆工具一起用，性能上也有點(diǎn)浪費(fèi)。

Rolldown 是個(gè)啥？為啥這么牛？

Rolldown ，就是用 Rust 寫的現(xiàn)代化 JavaScript 打包工具，堪稱 Rollup 的升級(jí)版。

這工具專注于三件事：速度、兼容性和優(yōu)化。

• 速度那沒說的，Rust 寫的就是快；
• 兼容性也好，能和現(xiàn)在的 Rollup 插件一起用；
• 優(yōu)化方面更厲害，有高級(jí)分塊控制、內(nèi)置模塊熱替換（HMR）和模塊聯(lián)邦這些新特性。

Vite 為啥非得換到 Rolldown？

就三個(gè)字：統(tǒng)一、性能、特性。

• 統(tǒng)一就是把預(yù)打包和生產(chǎn)打包全交給 Rolldown，簡(jiǎn)單不少。
• 性能上，Rust 寫的 Rolldown 比 JavaScript 寫的打包工具快得多。
• 特性嘛，前面說了，Rolldown 有 Rollup 和 esbuild 沒有的好東西。

Rolldown-vite 怎么用？超簡(jiǎn)單！

Rolldown-vite 就是把 Rolldown 和 Vite 結(jié)合在一起的包，用起來(lái)很方便。

你要是有 Vite 項(xiàng)目，就改一下package.json，把vite換成rolldown-vite就行。

{
  "dependencies": {
    "vite": "npm:rolldown-vite@latest"
  }
}

要是用 VitePress 或者元框架，就用overrides來(lái)?yè)Q。

• npm：

{
    "overrides": {
      "vite": "npm:rolldown-vite@latest"
    }
  }

• yarn：

{
    "resolutions": {
      "vite": "npm:rolldown-vite@latest"
    }
  }

改完后重新裝依賴，像以前一樣用 Vite 命令就行，Rolldown-vite 就自動(dòng)工作了。

rolldown-vite 包是一個(gè)臨時(shí)的解決方案，用于收集反饋和穩(wěn)定 Rolldown 的集成。在未來(lái)，這個(gè)功能將被合并回主 Vite 倉(cāng)庫(kù)。

Vue3.6 將捆綁 Rolldown

本次 Rolldown-vite 更新的主要內(nèi)容：

• 構(gòu)建交 Rolldown 管了，以前是 Rollup 的事。
• 優(yōu)化也歸 Rolldown 了，之前是 esbuild 干的。
• CommonJS 支持也換成 Rolldown 搞定了。
• 語(yǔ)法降級(jí) Oxc 上，esbuild 下崗。
• CSS 壓縮 Lightning CSS 頂上，esbuild 靠邊站。
• JS 壓縮 Oxc minifier 來(lái)，esbuild 歇著去。
• 打包配置也得 Rolldown 說了算。

并且 尤雨溪 也宣布了 Vue3.6 將直接和 Rolldown 捆綁在一起了：

Rolldown 一來(lái)，Vite 性能肯定更牛，功能也更全。雖然剛開始可能有點(diǎn)小問題，但這畢竟是個(gè)開創(chuàng)性的進(jìn)步。

Vite 攜手 Rolldown，為前端開發(fā)樹立了新的里程碑。

這一整合不僅顯著提升了構(gòu)建性能，更推動(dòng)了前端生態(tài)系統(tǒng)的標(biāo)準(zhǔn)化進(jìn)程。

從 Vue 3.6 到 tsdown 的廣泛應(yīng)用，Rolldown 正逐步成為下一代打包器的典范。

• Rolldown 官網(wǎng)：https://rolldown.rs/
• Vite Rolldown 集成：https://cn.vitejs.dev/guide/rolldown.html
• 尤雨溪宣布推出 Rolldown-Vite：https://voidzero.dev/posts/announcing-rolldown-vite
• Rolldown-Vite Github：https://github.com/vitejs/rolldown-vite