尤雨溪宣布:Vue 3.6 重大更新!Vite 将彻底重写!

作者:前端开发爱好者

兄弟们,前端构建工具领域发生重大变革!咱们一直用的 Vite ,那个让开发速度飞起的现代构建工具,最近宣布了一项超重磅的更新------把一个叫 Rolldown 的打包工具集成进来。

并且 尤雨溪 也宣布了 Vue3.6 将直接和 Rolldown 捆绑在一起了!

这玩意儿可是用 Rust 写的,性能强得不行,未来要把现在 Vite 里用的 esbuildRollup 都给替了。

Vite 现在用得爽,但也有点小麻烦

Vite 现在主要靠 esbuild 来预打包依赖,靠 Rollup 来生产打包。

这组合确实让构建效率上去了,但问题也不少。

开发环境和生产环境用的两套工具 ,有时候就不一致,bug 难找得很。而且这俩工具一起用,性能上也有点浪费。

Rolldown 是个啥?为啥这么牛?

Rolldown ,就是用 Rust 写的现代化 JavaScript 打包工具,堪称 Rollup 的升级版

这工具专注于三件事:速度兼容性优化

  • 速度那没说的,Rust 写的就是快;
  • 兼容性也好,能和现在的 Rollup 插件一起用;
  • 优化方面更厉害,有高级分块控制 、内置模块热替换 (HMR)和模块联邦这些新特性。

Vite 为啥非得换到 Rolldown?

就三个字:统一性能特性

  • 统一就是把预打包生产打包全交给 Rolldown,简单不少。
  • 性能上,Rust 写的 RolldownJavaScript 写的打包工具快得多。
  • 特性嘛,前面说了,RolldownRollupesbuild 没有的好东西。

Rolldown-vite 怎么用?超简单!

Rolldown-vite 就是把 RolldownVite 结合在一起的包,用起来很方便。

你要是有 Vite 项目,就改一下package.json,把vite换成rolldown-vite就行。

perl 复制代码
{
  "dependencies": {
    "vite": "npm:rolldown-vite@latest"
  }
}

要是用 VitePress 或者元框架,就用overrides来换。

  • npm
perl 复制代码
  {
    "overrides": {
      "vite": "npm:rolldown-vite@latest"
    }
  }
  • yarn
perl 复制代码
  {
    "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.6tsdown 的广泛应用,Rolldown 正逐步成为下一代打包器的典范。

  • Rolldown 官网https://rolldown.rs/
  • Vite Rolldown 集成https://cn.vitejs.dev/guide/rolldown.html
  • 尤雨溪宣布推出 Rolldown-Vitehttps://voidzero.dev/posts/announcing-rolldown-vite
  • Rolldown-Vite Githubhttps://github.com/vitejs/rolldown-vite
相关推荐
Carlos_sam1 分钟前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85011 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏40 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
midsummer_woo1 小时前
基于spring boot的医院挂号就诊系统(源码+论文)
java·spring boot·后端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
Olrookie2 小时前
若依前后端分离版学习笔记(三)——表结构介绍
笔记·后端·mysql