Vite 8正式发布,内置devtool,Wasm SSR 支持

昨天,前端Vue的祖师爷说,本周将有三个重磅发布,令前端圈躁动不已。

本以为要过两天才会放出炸弹,没想到却并没有一直吊着胃口,很快,Vite 8就宣布正式发布!

一个全新的,前端加速奔跑的时代,已经到来。

Vite 8 配备了最新的rolldown驱动,这是自Vite诞生以来最大的一次心脏手术。

原本是esbuild用于开发时的速度,rollup用于正式打包时的构建,这种左右脑互搏的情况,不仅令开发团队头痛不已,有时候用户在开发和构建项目的时候,本地和线上的结果居然不统一,更是令人头皮发麻。

这也是很多人和项目依旧固守Webpack阵营,迟迟不愿回到Vite生态的原因之一,虽然慢,但至少结果是统一的。

如今呢,这个局面被打破了,痛定思痛,尤雨溪团队成立了Void公司,从根上解决了这个问题,从底层的语法解析到压缩打包,全部由Void公司维护和实现,做一个从开发,测试,格式化,运行,调试等各个环节的全能Vite+生态。

换了心脏的Vite 8,构建速度快了10-30倍,实测报告如下:

  • Linear:生产构建时间从 46 秒降至 6 秒
  • Ramp:构建时间减少了 57%
  • Mercedes-Benz.io:构建时间最多减少 38%
  • Beehiiv: 构建时间减少 64%

以上都是国外真实的大型项目的提速反馈,Vite 8真正地让我们来到了大加速时代。

与此同时呢,令人眼前一亮的,就是Vite 8内置了devtool开发者调试工具,不再需要安装第三方依赖。

js 复制代码
import { defineConfig } from 'vite';

export default defineConfig({
    devtools: {
        enabled: true
    }
});

只需要按照如上配置启动devtool,就能像智能驾驶一样,开发和管理项目了。

同时,为了方便维护,管理,安装Vite插件,https://registry.vite.dev Vite插件平台应运而生,可以在这里,查看和浏览成千上万个Vite插件,开发者们再也不用全世界地找插件了。

前端规范的ESM运动,任重道远,require的历史包袱正在被越来越多的流行工具所矫正,Vite也不例外。

Vite 8 需要 Node.js 20.19+22.12+,这些范围确保 Node.js 支持不使用标志的 require(esm) ,允许 Vite 仅作为 ESM 分发。

内置 tsconfig 支持

Vite 8 内置 tsconfig 支持,开发者可以通过将 resolve.tsconfigPaths 设置为 true 来启用 TypeScript 路径别名解析,这会带来一定的性能开销,并且默认情况下是禁用的。

emitDecoratorMetadata 支持

Vite 8 现在已内置自动支持 TypeScript 的 emitDecoratorMetadata 选项,无需外部插件。

Wasm SSR 支持

wasm的支持也更进一步,.wasm?init 导入现在可以在 SSR 环境中工作,将 Vite 的 WebAssembly 功能扩展到服务器端渲染。

浏览器控制台转发

Vite 8 可以将浏览器控制台日志和错误转发到开发服务器终端,在与代码代理合作时特别有用,因为运行时客户端错误会在 CLI 输出中可见。

使用 server.forwardConsole 启用它,当检测到代码代理时会自动激活。


随着Vite 8的正式发布,后续计划也提上日程。

完整打包模式(实验性)

此模式在开发过程中打包模块,类似于生产构建。

初步结果显示,开发服务器启动速度提升 3 倍,完整刷新速度提升 40%,网络请求减少 10 倍。

这对于大型项目特别有帮助,因为未打包的开发方式会遇到扩展限制。

原始 AST 传输

允许 JavaScript 插件以最小的序列化开销访问 Rust 生成的 AST,弥合了 Rust 内部与 JS 插件代码之间的性能差距。

原生 MagicString 转换

支持自定义转换,其逻辑位于 JavaScript 中,但字符串操作计算在 Rust 中执行。

稳定环境 API

Vite团队正在努力使环境 API 稳定,生态系统中已开始定期会议,以便更好地协作。


我是农村程序员,独立开发者,前端之虎陈随易,技术群与交朋友请在个人网站 👇 联系我 ✌️

我的所有文章均为古法手写,无 AI 添加剂,请放心食用,如果你觉得本文有用,一键三连 (点赞评论转发),就是对我最大的支持~

相关推荐
CodeSheep1 小时前
首个OpenClaw龙虾大模型排行榜来了,国产AI霸榜了!
前端·后端·程序员
Moment1 小时前
想转 AI 全栈?这些 Agent 开发面试题你能答出来吗
前端·后端·面试
Joy T2 小时前
【Electron架构解析】打破浏览器沙盒:从 Web 前端到桌面客户端的技术跨越
前端·架构·electron
parafeeee10 小时前
程序人生-Hello’s P2P
数据库·后端·asp.net
芝士爱知识a10 小时前
【程序人生】码农考公指南:是“降维打击”还是“围城自困”?
程序人生·职场和发展·程序员·公务员·考公·职场规划
Rsun0455110 小时前
React相关面试题
前端·react.js·前端框架
鹏多多.11 小时前
Flutter使用screenshot进行截屏和截长图以及分享保存的全流程指南
android·前端·flutter·ios·前端框架
bug攻城狮11 小时前
Spring Boot应用内存占用分析与优化
java·jvm·spring boot·后端