兄弟們，前端構建工具領域發生重大變革！咱們一直用的 Vite，那個讓開發速度飛起的現代構建工具，最近宣布了一項超重磅的更新——把一個叫 Rolldown 的打包工具集成進來。

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

這玩意兒可是用 Rust 寫的，性能強得不行，未來要把現在 Vite 里用的 esbuild 和 Rollup 都給替了。

Vite 現在用得爽，但也有點小麻煩

Vite 現在主要靠 esbuild 來預打包依賴，靠 Rollup 來生產打包。

這組合確實讓構建效率上去了，但問題也不少。

開發環境和生產環境用的兩套工具，有時候就不一致，bug 難找得很。而且這倆工具一起用，性能上也有點浪費。

Rolldown 是個啥？為啥這么牛？

Rolldown ，就是用 Rust 寫的現代化 JavaScript 打包工具，堪稱 Rollup 的升級版。

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

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

Vite 為啥非得換到 Rolldown？

就三個字：統一、性能、特性。

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

Rolldown-vite 怎么用？超簡單！

Rolldown-vite 就是把 Rolldown 和 Vite 結合在一起的包，用起來很方便。

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

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

要是用 VitePress 或者元框架，就用overrides來換。

• npm：

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

• yarn：

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

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

rolldown-vite 包是一個臨時的解決方案，用于收集反饋和穩定 Rolldown 的集成。在未來，這個功能將被合并回主 Vite 倉庫。

Vue3.6 將捆綁 Rolldown

本次 Rolldown-vite 更新的主要內容：

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

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

Rolldown 一來，Vite 性能肯定更牛，功能也更全。雖然剛開始可能有點小問題，但這畢竟是個開創性的進步。

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

這一整合不僅顯著提升了構建性能，更推動了前端生態系統的標準化進程。

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

• Rolldown 官網：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