Vite 6.0 发布:引领现代前端开发新方向

news2024/12/27 0:48:08

Vite 6.0 带来了大量更新与优化,旨在简化开发流程、提升性能,并解决现代 Web 开发中的诸多挑战。本次更新引入了 实验性环境 API 和现代化的工具链,进一步巩固了 Vite 作为开发者首选工具的地位。以下是关于新特性、生态发展以及重要更新的全面解读。

Vite 生态的快速成长

过去一年,Vite 的 npm 每周下载量从 750 万飙升至 1700 万,增长势头惊人。包括 Astro、Nuxt、SvelteKit、Solid Start、Qwik City 和 RedwoodJS 在内的主流框架都将 Vite 作为构建的核心工具,提供更快的构建速度和更高效的开发体验。Google、Microsoft、NASA 和 Shopify 等知名企业也将 Vite 纳入工作流程,充分体现了它在各行业中的影响力。

此外,为了促进社区合作并分享实践经验,Vite 正邀请企业分享其使用案例,这将进一步展示其在各种领域中的价值。

ViteConf 2024 的亮点

由 StackBlitz 主办的第三届 ViteConf 汇聚了开发者和贡献者,共同庆祝 Vite 的技术进步。今年大会规模空前,并带来了以下重要更新:

  • VoidZero:专注于高性能开源 JavaScript 工具链的新公司,正在开发的工具 Rolldown 和 Oxc 将与 Vite 深度集成。

  • bolt.new:StackBlitz 发布的创新 Remix 应用,结合 Claude 和 WebContainers,支持开发者快速构建、运行并部署全栈应用。

  • Storybook 测试升级:Storybook 展示了基于 Vitest 的新测试功能,为开发工作流提供更强大的支持。

此外,Vite 官方网站(vite.dev)焕新上线,展现了其发展过程中更加成熟的形象。

Vite 6.0 的主要更新与改进
1. resolve.conditions 默认值更新

以前,resolve.conditions 的默认值是空数组 [],并由内部自动添加某些条件。而在 Vite 6 中,这些条件(如 ['module', 'browser', 'development|production'])不再默认添加,开发者需手动指定。

提供了新的默认值 defaultClientConditionsdefaultServerConditions,如果你使用了自定义条件(例如 ['custom']),需更新为 ['custom', ...defaultClientConditions]

2. 改进的 JSON 处理

Vite 6 在开启 json.stringify: true 的同时默认保留 json.namedExports,并新增 json.stringify: 'auto',仅对大型 JSON 文件进行序列化。可以显式设置 json.namedExports: false 来关闭命名导出。


3. HTML 的资产处理扩展

从原先仅支持 <link href><img src>,扩展到更多 HTML 元素,具体支持列表详见官方文档。如果想跳过某些元素的处理,可以添加 vite-ignore 属性。


4. 默认使用现代 Sass API

现代 Sass API 成为默认选项,旧版 API 仍可通过 css.preprocessorOptions.sass.api: 'legacy' 使用,但将在下个大版本中移除。迁移细节可参考 Sass 文档。


5. CSS 输出文件名可自定义

库模式下,CSS 文件的默认输出名从固定的 style.css 改为根据 package.json 中的 name 生成。需要保留原名称的项目可以设置 build.lib.cssFileName: 'style'


6. 更新 postcss-load-config

升级到 v6 后,TypeScript 配置需使用 tsxjiti,YAML 配置则需加载 yaml 模块。


7. 实验性环境 API

新推出的环境 API 缩小了开发和生产环境的差距,支持开发者构建更贴近生产环境的工具链。这一功能将为 JavaScript 生态带来更多创新可能。

适用场景:

  • 单页应用(SPA)开发者:工作流无任何变化,依然高效快捷。

  • 自定义 SSR 应用开发者:框架作者和插件维护者可以利用新 API 简化开发流程,同时向后兼容现有的 SSR 配置。

  • 插件开发者:新 API 提供更多控制力,帮助构建更强大的插件。


Node.js 兼容性

Vite 6 支持 Node.js 18、20 和 22,不再支持 Node.js 21。未来版本可能对较旧的 Node.js 版本逐步停止支持。


总结

Vite 6.0 通过引入创新功能和生态改进,巩固了其在现代前端开发中的核心地位。从其广泛的行业应用到对开发者体验的优化,Vite 不仅是一款工具,更是推动 Web 开发的强大引擎。如果你正在寻找一款高效的前端工具,不妨试试 Vite 6.0,它将助你构建更快速、更高质量的应用。

最后:

React Hook 深入浅出

CSS技巧与案例详解

vue2与vue3技巧合集

VueUse源码解读

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

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

相关文章

开源的跨平台SQL 编辑器Beekeeper Studio

一款开源的跨平台 SQL 编辑器&#xff0c;提供 SQL 语法高亮、自动补全、数据表内容筛选与过滤、连接 Web 数据库、存储历史查询记录等功能。该编辑器支持 SQLite、MySQL、MariaDB、Postgres 等主流数据库&#xff0c;并兼容 Windows、macOS、Linux 等桌面操作系统。 项目地址…

mysql 5.7安装及安装后无法启动问题处理

下载安装包&#xff0c;直接解压 配置环境变量 创建my.ini文件 [mysqld] #端口号 port 3306 #mysql-5.7.27-winx64的路径 basedirD:/soft/mysql57 #mysql-5.7.27-winx64的路径\data datadirD:/soft/mysql57/data #最大连接数 max_connections200 #编码 character-set-server…

spine 动画层 动态权重

前奏.业务背景 这边想实现一个功能&#xff0c;项目中有 一只猫 猫的头会盯着逗猫棒移动。因为素材还没到所以这里使用了 spine 自带的猫头鹰。他的动画 刚好挺有针对性&#xff1a;&#xff08;关联上篇&#xff09;https://blog.csdn.net/nicepainkiller/article/details/144…

Spark 内存管理机制

Spark 内存管理 堆内内存和堆外内存 作为一个 JVM 进程&#xff0c;Executor 的内存管理建立在 JVM(最小为六十四分之一&#xff0c;最大为四分之一)的内存管理之上&#xff0c;此外spark还引入了堆外内存&#xff08;不在JVM中的内存&#xff09;&#xff0c;在spark中是指不…

Vision Transformer(vit)的主干

图解&#xff1a; 代码&#xff1a; class VisionTransformer(nn.Module):def __init__(self, img_size224, patch_size16, in_c3, num_classes1000,embed_dim768, depth12, num_heads12, mlp_ratio4.0, qkv_biasTrue,qk_scaleNone, representation_sizeNone, distilledFalse,…

mongodb配置ssl连接

mongodb5.0.9 centos7.6x86 1、正常启动mongod -f mongodb.conf 2、生成所需要的ssl证书 服务端ssl配置&#xff1a; 2.1生成ca.pem证书 #-x509&#xff1a; 用于生成自签证书&#xff0c;如果不是自签证书则不需要此项 #-days: 证书的有效期限&…

Linux 中的 ls 命令:从使用到源码解析

ls 命令是 Linux 系统中最常用和最基本的命令之一。下面将深入探讨 ls 命令的使用方法、工作原理、源码解析以及实际应用场景。 1. ls 命令的使用** ls 命令用于列出目录内容&#xff0c;显示文件和目录的详细信息。 1.1 基本用法 ls [选项] [文件或目录]例如&#xff1a; …

Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo)

Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo) 目录 Python 【图像分类】之 PyTorch 进行猫狗分类功能的实现(Swanlab训练可视化/ Gradio 实现猫狗分类 Demo) 一、简单介绍 二、PyTorch 三、CNN 1、神经网络 2、卷…

【C语言】结构体(二)

一&#xff0c;结构体的初始化 和其它类型变量一样&#xff0c;对结构体变量可以在定义时指定初始值 #include <stdio.h> #include <stdlib.h> struct books // 结构体类型 {char title[50];char author[50]; //结构体成员char subject[100];int book_id; }…

C++(4个类型转换)

1. C语言中的类型转换 1. 隐式 类型转换&#xff1a; 具有相近的类型才能进行互相转换&#xff0c;如&#xff1a;int,char,double都表示数值。 2. 强制类型转换&#xff1a;能隐式类型转换就能强制类型转换&#xff0c;隐式类型之间的转换类型强相关&#xff0c;强制类型转换…

Windows下从命令行(Powershell/CMD)发送内容到系统通知中心

Windows下从命令行&#xff08;Powershell/CMD&#xff09;发送内容到系统通知中心 01 前言 在平时写脚本的时候&#xff0c;将日志等信息直接输出到控制台固然是最直接的&#xff0c;而如果是一些后台执行的任务&#xff0c;不需要时刻关注运行细节但是又想知道一些大致的情…

四、初识C语言(4)

一、作业&#xff1a;static修饰局部变量 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <string.h> //作业&#xff1a;static修饰局部变量 int sum (int a) {int c 0;static int b 3;c 1;b 2;return (abc); } int main() {int i 0;int a …

基于深度学习的甲状腺结节影像自动化诊断系统(PyQt5界面+数据集+训练代码)

随着医学影像技术的发展&#xff0c;计算机辅助诊断在甲状腺结节的早期筛查中发挥着重要作用。甲状腺结节的良恶性鉴别对临床治疗具有重要意义&#xff0c;但传统的诊断方法依赖于医生的经验和影像学特征&#xff0c;存在一定的主观性和局限性。为了解决这一问题&#xff0c;本…

VLC 播放的音视频数据处理流水线搭建

VLC 播放的音视频数据处理流水线搭建 音视频流播放处理循环音频输出处理流水线VLC 用 input_thread_t 对象直接或间接管理音视频播放有关的各种资源,包括 Access, Demux, Decode, Output, Filter 等,这个类型定义 (位于 vlc-3.0.16/include/vlc_input.h) 如下: s…

Android 12系统源码_RRO机制(一)Runtime Resource Overlay机制实践

前言 Android的RRO&#xff08;Runtime Resource Overlay&#xff09;机制允许开发者在运行时替换或重写系统资源&#xff0c;例如布局、图标、字符串等。这个机制的目标是为了支持设备定制和主题化&#xff0c;特别是在不修改系统源代码的情况下。RRO通过在系统的资源上叠加一…

Tomcat新手成长之路:安装部署优化全解析(下)

接上篇《Tomcat新手成长之路&#xff1a;安装部署优化全解析&#xff08;上&#xff09;》: link 文章目录 7.应用部署7.1.上下文7.2.启动时进行部署7.3.动态应用部署 8.Tomcat 类加载机制8.1.简介8.2.类加载器定义8.3.XML解析器和 Java 9.JMS监控9.1.简介9.2.启用 JMX 远程监…

动态代理如何加强安全性

在当今这个信息爆炸、网络无孔不入的时代&#xff0c;我们的每一次点击、每一次浏览都可能留下痕迹&#xff0c;成为潜在的安全隐患。如何在享受网络便利的同时&#xff0c;有效保护自己的隐私和信息安全&#xff0c;成为了每位网络使用者必须面对的重要课题。动态代理服务器&a…

python---面向对象-python中的实践(2)

如何定义一个类&#xff1f; class 类名:pass怎样通过类&#xff0c;创建出一个对象&#xff1f; 根据类创建对象one Money() 执行流程1. 类的定义2. 根据类&#xff0c;创建出一个对象3. 将对象的唯一标识返回class Money:passprint(Money.__name__) xxx Money print(xxx.…

数据结构-散列函数的构造方法

一.数字关键词 关键词存储应该尽可能的离散 直接定址法:利用线性函数,例如上面的例子,h(key)key-1990,key1990&#xff0c;这个就被存放在0的位置 数字分析法:关键字可能有很到位组成,每一位变化可能都不一样&#xff0c;有的位是不变的,就是说不同的对象这一位都是一样的,有的…

单点登录解决方案 CAS(Central Authentication Service)详解

目录 CAS 的工作原理 票据&#xff08;Ticket&#xff09;详解 CAS 的优势 CAS 的应用场景 小结 参考资料 Central Authentication Service&#xff08;中央认证服务&#xff0c;简称 CAS&#xff09;是一个开源的企业级单点登录&#xff08;Single Sign-On, SSO&#xf…