尤雨溪:Vite的现状与未来展望

news2024/11/17 9:59:42

10 月 5 日 - 6 日,ViteConf 2023 在线举行,Vue 和 Vite 的创建者尤雨溪发表了题为《The State of Vite》 的演讲,他分享了 Vite 的现状与未来展望,本文就来看一看 Vite 现在怎么样了,以及未来的路将怎么走!

图片

Vite 版本发布情况

首先,来快速回顾一下自上一次 ViteConf 以来, Vite 的版本发布情况。每个版本都有很多更新,这里只关注最主要的功能。

Vite 4.0

Vite 4.0 于 2022 年 12 月发布,是上一次 ViteConf 后的主要版本更新。这个版本最大的变化是升级了 Rollup 3。Vite 和 Rollup 同步了主要版本的发布,因此也停止了对旧版 Node.js 的支持。

图片

相较于 Vite 3.0,这是一个更小的主要版本,没有太多的破坏性变化。事实上,Vite 团队的目标是发布一个稳定的版本:充分利用生态系统的 CI 工具来确保与下游项目的兼容性,以尽可能少地影响最终用户。

除此之外,Vite 还采用了由 Arnaud Barre 最初创建的基于 SWC 的 React 插件,他现在也是 Vite 团队成员!

Vite 4.1

Vite 4.1 于 2023 年 2 月发布,该版本主要是将 Rollup 和 esbuild 的版本进行同步。值得注意的是 React 插件的升级:Plugin-react 插件修复了很多热更新(HMR)方面的问题,并且采用 SWC 的版本增加了对 SWC 插件的支持。

图片

Vite 4.2

Vite 4.2 于 2023 年 3 月发布,该版本的主要改进是提升了 source map 的调试体验。Vite 团队与 Chrome Devtools 团队进行合作,修复了一些长期存在的路径显示问题。通过x_google_ignoreList source map 扩展添加了排除文件的选项来排除堆栈跟踪。

图片

这个选项被一些更高级的框架,如 Nuxt 和 Angular 所使用,它可以让开发者在处理错误时,只关注于真正关心的部分,从而提升调试效率。

Vite 4.3

Vite 4.3 于 2023 年 4 月发布,该版本主要关注性能方面的改进,使冷启动速度比之前快 4 倍,热模块替换速度比以前快 2 倍,其中主要的优化是对解析策略进行了重新编写。

图片

Vite 4.4

Vite 4.4 于 2023 年 7 月发布,该版本添加了对 Lightning CSS 的实验性支持。这是一个使用 Rust 编写的快速 CSS 编译工具,它可以加快 CSS 的处理速度。这个功能是可选的,需要显式地安装 Lightning CSS,并将其用于处理 Vite 内部的 CSS 转换,如导入内联和 CSS 模块化,还可以用于对 CSS 进行压缩处理。

图片

此外,该版本还在 create-vite 中添加了 Solid 和 Qwik 模板。

Vite 5.0

Vite 5.0 目前处于测试阶段(beta),这是一个稳定版本,主要变化是停止支持已经过时(EOL)的 Node.js 版本。

另外,Vite 正在弃用 CommonJS API。这个 API 目前还没有被移除,所以如果仍在使用 CommonJS API,不会出现任何问题,只会收到一个小的警告,提示应该使用 ESM API 替代它。同时,Vite 还与大多数相关项目合作,鼓励他们使用 ESM API。

图片

Vite 增长和采用情况

接下来看看 Vite 在增长和采用方面的情况如何。

Github Star

Vite 的 Github 仓库累计获得了超过 60k Star。

图片

npm 下载量

Vite 每周的下载量达到了 720 万次,相比去年增长了 4 倍。

图片

Storybook

Storybook 在 4 月发布的 7.0 版本中,提供了一流的 Vite 支持。

图片

Angular

Angular 在 5 月发布的 16 版本中,使用 Vite 作为其开发服务器。

图片

Preact

Preact 在 6 月将其默认工具切换到了 Vite。

图片

Redwood

Redwood 在 7 月发布的 v6 版本完全基于 Vite 构建。

图片

Bun

全新的 JavaScript 运行时 Bun 自从 0.7 版开始支持 Vite。

图片

VitePress

VitePress 是用于 Vite、Rollup、Vue 等众多项目文档生成的静态网站生成器,即将达到 1.0 版本。

图片

Remix

Vite 团队正在与 Remix 团队合作,探索迁移到 Vite,并且已经取得了相当大的进展。

图片

小结

显然,Vite 正在成为一个基础工具,越来越多的项目都在其之上构建。这些项目在不同的方向上都在创新,这种多样性一直是 Web 的魅力所在。

Vite 的目标是解放开发者,减少构建工具层面的重复工作和复杂性,并作为一个共享基础设施,促进 Web 生态系统中更容易、更快速、更高级别的创新。在抽象化足够低级别的复杂性的同时,暴露出足够的灵活性,以便高级用户、框架和工具作者可以使用。

为了更好地服务这一目标,总结了 Vite 的理念,如下:

  • 精简和可扩展的核心

  • 推动现代化Web

  • 实用的性能方法

  • 支持高级框架

  • 合作生态系统

最后两点特别重要,Vite之所以取得今天的成就,是因为它具有一个合作的生态系统——一个建立在共同基础之上的开源项目群体,在不同的方向上进行创新,并相互激发灵感。

Vite 未来展望

那么,接下来呢?Vite 如何更好地履行其使命?仍然存在哪些缺陷,还可以做出哪些改进?

Vite 痛点和挑战

以下是收集到的一些 Vite 用户反馈的痛点:

  • 相对较慢的生产构建速度

  • 开发和生产环境之间的一致性问题

  • 开发过程中未捆绑的ESM的网络开销

  • 令人困惑的SSR外部依赖问题

  • 对块拆分的控制能力有限

  • 缺乏一方面的模块联邦支持

这些问题大多数从 Vite 发布时就存在了。挑战在于这些问题大多需要在打包工具层次上解决。Vite 在底层使用了两个打包工具:esbuild 和 Rollup。

  • esbuild 非常快,但是对构建资源优化的控制非常有限,并且插件API不够灵活;

  • Rollup 成熟且灵活,但与本地打包工具相比仍然较慢,并且ESM/CJS互操作的处理还有待改进。

这两种打包工具无法完全替代彼此,并且存在一些细微的行为差异。所以,如果能有一个具有本地速度和 Rollup 的灵活性的打包工具,那太好了。

这个打包工具就是 Rolldown。

Rolldown

Vite 团队正在研发 Rolldown,它是使用 Rust 开发的 Rollup 替代品。

图片

Rolldown 的重点将放在本地级别的性能上,同时尽可能与 Rollup 保持兼容。最终目标是在 Vite 中切换到 Rolldown,并对用户产生最小的影响。

目前,Rolldown 仍处于早期的开发阶段。原始的 Rolldown 项目在很久之前就开始了,它或多或少是 Rspack 的前身,字节跳动的 Webpack 的 Rust 移植版本。

现在已经有了 Rolldown 的原始作者,他们也是 Rspack 的核心贡献者,正在从零开始重新编写 Rolldown 的新版本,并借鉴了以前迭代的知识和经验。

目前已经有一个可以打包普通ES模块的原型,但仍有许多架构层面的决策需要验证,代码库目前正经历许多变化。在获得更稳定的结果后,团队计划将其开源。

Vite 团队将与 Rspack 团队合作开发一些共享的底层工具和功能,例如,都将建立在当前 Rust 中最快的 JS 解析器 OXC 的基础上,还将研究如何在 Rspack 和 Vite 之间实现模块联邦。

当然,Vite 团队还将与 Rollup 的维护者 Lukas 合作,确保 Rollup 和 Rolldown 之间的 API 和行为一致性。

Vite 发展路线

从零开始用 Rust 编写一个打包工具并非易事,这需要花费大量的努力。下面来看一下 Rolldown 的路线图,以及从短期到长期的关键节点。

第一阶段:聚焦基础打包功能

第一阶段的目标是能够替代 esbuild 进行依赖预打包,其中关键的挑战在于处理 CommonJS 和伪 ESM 依赖项。

第二阶段:实现 Rollup 的功能

第二阶段的目标是实现与 Rollup 相当的功能,尤其是与 Rollup 插件生态系统的兼容性,以及实现 tree-shaking 和高级块分割控制。

最终目标是在 Vite 中使用 Rolldown 作为生产构建的替代品,以提供功能更强大、高效、易用和灵活的打包工具。

第三阶段:常见需求的内置转换

第三个阶段会稍微遥远一些,它将包括一些最常见需求的内置转换,例如 TypeScript、JSX、代码压缩,以及基于目标环境进行语法降级。

这个阶段的目标是实现 esbuild 的功能,最终将用 Rolldown 取代 esbuild 和 Rollup。

第四阶段:使用 Rust 重构 Vite

从长远来看,Vite 团队也在考虑如何让 Vite 本身能够更好地受益于原生级别的速度。

一种可能的实现方式是通过 Rust API 来公开 Rolldown 的插件容器,并将 Rolldown 作为 Vite 引入自己的Rust核心的依赖项。这样一来,Vite 就可以将许多内部插件和转换使用 Rust 重构,从而提高性能关键路径上的效率。

此外,为那些开发过程中有太多未打包模块的项目引入完全打包模式也是一个备选方案。

最终,Rolldown 的目标并不是取代现有的工具,而是更好地满足在 Vite 中所面临的独特需求,并最终使所有使用 Vite 的用户受益。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1065584.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

港联证券:a股b股区别?

A股和B股是指中国大陆股市中的两类股票,两者在法律规定、税收、流转规划和出资者身份等多个方面都有较大不同。下面从多个视点分析A股B股的差异。 一、法律规定 在中国大陆股市中,A股是指在上海证券生意所和深圳证券生意所上市流转的股票,只…

IDEA对比两个文件的内容

提前说明:IDEA可以用对比功能对比两个文件的内容,适合对比大部分内容重复,少部分内容有变化的两个文件。 第一步:鼠标点击选中一个文件 第二步:按照Ctrl的同时,鼠标左键再点击选择另一个文件 第三步&#…

零基础如何自学网络安全,基于就业前景全方位讲解,包教包会

你是否对网络空间安全充满好奇?想要解开网络世界神秘的面纱?你是否对黑客技术着迷?而找不到合适的学习途径?你是否遭到过各种各样的网络攻击,却因知识的匮乏束手无策? 那么接下来将为你全面介绍&#xff0c…

【算法练习Day14】二叉树的最大深度二叉树的最小深度完全二叉树的节点个数

​📝个人主页:Sherry的成长之路 🏠学习社区:Sherry的成长之路(个人社区) 📖专栏链接:练题 🎯长路漫漫浩浩,万事皆有期待 文章目录 二叉树的最大深度二叉树的最…

插入排序/折半插入排序

插入排序/折半插入排序 插入排序 插入排序(英语:Insertion Sort)是一种简单直观的排序算法。它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入。插入排序在实现上,通常…

IDEA中字符串怎么自动转义,双引号自动转义的小技巧

1.选中要填写的字符串 ,按altenter 2.点击 Inject language or reference,选择JSON组件 3.再次按altenter,点击Edit JSON Fragment 4.在弹出的窗口编辑源字符串,代码中字符串就能自动转义了

ThreeJS-3D教学五-材质

我们在ThreeJS-3D教学二&#xff1a;基础形状展示中有简单介绍过一些常用的材质&#xff0c;这次我们举例来具体看下效果&#xff1a; 代码是这样的&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&…

4.绘制颜色点(点击)

愿你出走半生,归来仍是少年&#xff01; 在点击绘制点的基础上&#xff0c;通过片源着色器给每个点设置颜色。以原点为中心&#xff0c;在一象限的点为红色&#xff0c;三象限为绿色&#xff0c;其他象限为白色。 1.知识点 1.1.Uniform变量 向片源着色器传入的数据变量。 1.…

1700*D. Flowers(DP前缀和预处理打表)

Problem - 474D - Codeforces 题意&#xff1a; 有白花和红花两种&#xff0c;把 x 朵花排成一排&#xff0c;要求白花必须连续 k 个一块放置&#xff0c;则有 cnt 种情况。给出 a 和 b&#xff0c;计算a到b之间的 x 对应的 cnt 总和&#xff0c;并且对1e97取模。 解析&#x…

第二证券:A股反弹已至?9月最牛金股涨超41%

进入10月&#xff0c;作为券商月度战略精华的新一期金股也连续宣布。 从各券商关于十月份的大势研判来看&#xff0c;一些券商达观地认为反弹行情正在打开&#xff0c;也有一些券商认为仍是轰动市。具体配备上&#xff0c;AI、科创相关的标的仍然遭到喜欢&#xff0c;一起不少…

OWASP Top 10漏洞解析(3)- A3:Injection 注入攻击

作者&#xff1a;gentle_zhou 原文链接&#xff1a;OWASP Top 10漏洞解析&#xff08;3&#xff09;- A3:Injection 注入攻击-云社区-华为云 Web应用程序安全一直是一个重要的话题&#xff0c;它不但关系到网络用户的隐私&#xff0c;财产&#xff0c;而且关系着用户对程序的新…

SAP BC TSV_TNEW_PAGE_ALLOC_FAILED

解决方案&#xff1a; 1)业务上&#xff0c;限制数据量&#xff0c;分多次查数据 2)调整参数 临时调整 se38 -rsmemory

PLC之间无线通信-不用编程实现多品牌PLC无线通讯的解决方案

本文是PLC设备之间基于IGT-DSER系列智能网关实现WIFI无线通讯的案例。采用西门子S7-1500系列的PLC作为主站&#xff0c;与其它品牌的PLC之间进行网络通讯。案例包括智能网关AP方式、现场WIFI信号两种方式。有线以太网方式实现PLC之间通讯的案例 一、智能网关AP方式 将网络中的其…

Vercel部署个人静态之DNS污染劫持问题

vercel是我第一次接触静态网站托管所使用的服务&#xff0c;类似的还有github以及Netfily。但是Vercel的自动化构建远比github page方便的多。通过github授权给Vercel就实现了自动拉取构建及发布的一系列流程。在本地推送代码可以使用小乌龟工具&#xff0c;线上代码发布使用Ve…

【msg_msg+sk_buff】D3CTF2022-d3kheap

前言 本方法来自 CVE-2021-22555&#xff0c;非常漂亮的组合拳&#xff0c;仅仅一个 1024 的 UAF 即可提权&#xff0c;但是对于小堆块的 UAF 不适用。 程序分析 启动脚本如下&#xff1a; #!/bin/sh qemu-system-x86_64 \-m 256M \-cpu kvm64,smep,smap \-smp cores2,thr…

python性能分析

基于cProfile统计函数级的时延&#xff0c;生成排序列表、火焰图&#xff0c;可以快速定位python代码的耗时瓶颈。参考如下博文结合实操&#xff0c;总结为三步&#xff1a; 使用 cProfile 和火焰图调优 Python 程序性能 - 知乎本来想坐下来写篇 2018 年的总结&#xff0c;仔细…

目标识别项目实战:基于Yolov7-LPRNet的动态车牌目标识别算法模型(二)

前言 目标识别如今以及迭代了这么多年&#xff0c;普遍受大家认可和欢迎的目标识别框架就是YOLO了。按照官方描述&#xff0c;YOLOv8 是一个 SOTA 模型&#xff0c;它建立在以前 YOLO 版本的成功基础上&#xff0c;并引入了新的功能和改进&#xff0c;以进一步提升性能和灵活性…

全平台高速下载器Gopeed

什么是 Gopeed ? Gopeed &#xff08;全称 Go Speed&#xff09;是一款支持全平台的高速下载器&#xff0c;开源、轻量、原生&#xff0c;采用 Golang Flutter 开发&#xff0c;支持&#xff08;HTTP、BitTorrent、Magnet 等&#xff09;协议&#xff0c;并支持所有平台。 已…

linearlayout中使用多个weight导致部分子控件消失异常

问题描述&#xff1a; 在一个linearlayout中写了两个用到weight的布局&#xff0c;在androidstudio中显示正常 但是代码跑起来之后最下面哪一行都消失了&#xff1b; 解决办法1 把两个用到weight的改成一个了&#xff0c;外面那层的weight写成固定宽度就能正常显示出丢失的…

【C++】vector的模拟实现 | 使用memcpy拷贝时的问题 | 实现深拷贝

目录 基本框架及接口 构造函数 无参构造 迭代器区间构造 初始化构造 析构函数 size() | capacity() 扩容的reserve() 使用memcpy拷贝的问题 改变大小的resize() operator[] 迭代器的实现 vector的增删 尾插push_back() 尾删pop_back() 在指定位置插入insert() …