Vite 4.0 正式发布!

简介: Vite 4.0 正式发布!

下面就来看看 Vite 4.0 有哪些更新吧! 1.webp.jpg

与 Vite 3 相比,这个主版本的的更新范围更小,主要目标是升级到 Rollup 3。Vite 团队与生态系统紧密合作,以确保这个新的主要版本顺利升级。

Rollup 3

Vite 现在正在使用 Rollup 3,这使我们能够简化 Vite 的内部资源处理并有许多改进。

Vite core monorepo 框架插件

@vitejs/plugin-vue@vitejs/plugin-react 从 Vite 的第一个版本开始就是 Vite core monorepo 的一部分。这有助于在进行更改时获得紧密的反馈循环,因为同时测试和发布了 Core 和插件。

借助 vite-ecosystem-ci,可以通过在独立仓库上开发的这些插件获得此反馈,因此从 Vite 4 开始,它们已从 Vite core monorepo 中移出。

在开发过程中使用 SWC 的新 React 插件

SWC 现在是 Babel 的成熟替代品,尤其是在 React 项目中。SWC 的 React 快速重新刷新比 Babel 快很多,对于某些项目来说,SWC 现在是一个更好的选择。从 Vite 4 开始,有两个插件可用于不同的 React 项目。

(1)@vitejs/plugin-react

@vitejs/plugin-react 是一个使用 esbuild 和 Babel 的插件,以较小的包占用空间和能够使用 babel transform pipeline 的灵活性实现快速 HMR。

(2)@vitejs/plugin-react-swc (新)

@vitejs/plugin-react-swc 是一个新的插件,在构建过程中使用 esbuild,但在开发过程中将 Babel 替换为 SWC。 对于不需要非标准 React 扩展的大型项目,冷启动和热更新 (HMR) 会加快。

兼容性

现代浏览器构建现在默认以 Safari 14 为目标,以实现更广泛的 ES2020 兼容性。这意味着现代构建现在可以使用 BigInt,并且不再转译空值合并运算符。如果需要支持旧的浏览器,可以像往常一样添加@vitejs/plugin-legacy

将 CSS 作为字符串导入

在 Vite 3 中,.css 文件的默认导出可能会引入 CSS 的双重加载。

css

复制代码

import cssString from './global.css';

这种双重加载可能会发生,因为会发出.css文件,并且很可能 css 字符串也会被应用代码使用。从 Vite 4 开始,.css默认导出被弃用。在这种情况下,需要使用 ?inline 查询后缀修饰符,因为它不会发出导入的.css样式。

css

复制代码

import stuff from './global.css?inline'

其它功能

  • 预打包依赖项时支持 patch-package;
  • 更简洁的构建日志输出并切换到 kB 以与浏览器开发工具保持一致;
  • 改进 SSR 期间的错误消息。

Vite 4.0 更新详情:github.com/vitejs/vite…

相关文章
|
前端开发 程序员
Mac电脑:安装cnpm(补充步骤)
在前端开发初期,对于新入行的新手来说,掌握和使用cnpm是必不可少的过程,安装cnpm可以加快安装软件的速度,想要使用cnpm,首先要知道安装步骤,以及解决安装使用的时候遇到的一些问题。本篇博文对之前的npm安装步骤流程做一个补充,大牛可以忽略此篇文章,分享给有需要的人,具体的内容如下所示。
2584 0
Mac电脑:安装cnpm(补充步骤)
|
Java 应用服务中间件 Shell
Nginx+Keepalived+Tomcat 实现Web高可用集群
Nginx+Keepalived+Tomcat 实现Web高可用集群
342 0
|
8月前
|
人工智能 自然语言处理 程序员
通义灵码内置 DeepSeek V3 和 R1 满血版 671B模型,免费不限量,免部署!
近期,通义灵码能力再升级全新上线模型选择功能,支持基于百炼的 DeepSeek-V3 和 DeepSeek-R1 满血版671B模型,用户可以在 VSCode 和 JetBrains 里搜索并下载最新通义灵码插件,在输入框里选择模型,即可轻松切换模型。
|
人工智能 自然语言处理 人机交互
|
11月前
|
JavaScript
可自由配置的jQuery消息提示框插件toast
jquery.toast.js是一款可自由配置的jQuery消息提示框插件。该消息提示框可以自定义背景和前景色,提示框的位置,提示框的显示时间,提示框的动画效果等。
280 2
|
10月前
|
数据采集 监控 搜索推荐
商业案例 I 数据中台用户场景案例
杭州奥零数据科技有限公司成立于2023年,专注于数据中台业务,维护开源项目AllData并提供商业版解决方案。AllData提供数据集成、存储、开发、治理及BI展示等一站式服务,支持AI大模型应用,助力企业高效利用数据价值。
|
11月前
|
Web App开发 缓存 前端开发
Vite 4.0 的技术优势
【10月更文挑战第21天】
260 39
|
12月前
|
JavaScript 前端开发 编译器
掌握现代化JavaScript:ECMAScript提案与特性
【10月更文挑战第13天】本文介绍了ECMAScript(ES)的最新提案与特性,包括可选链、空值合并运算符、类字段和顶层Await等。通过跟踪TC39提案、使用Babel或TypeScript、测试兼容性以及逐步迁移,开发者可以高效地采用这些新特性,简化代码、提高开发效率并增强应用功能。文章还提供了实战技巧,帮助开发者在现代Web开发中充分利用这些现代化的特性。
|
SQL NoSQL 数据库
开发效率与灵活性:SQL vs NoSQL
【8月更文第24天】随着大数据和实时应用的兴起,数据库技术也在不断发展以适应新的需求。传统的SQL(结构化查询语言)数据库因其成熟的数据管理机制而被广泛使用,而NoSQL(Not Only SQL)数据库则以其灵活性和扩展性赢得了众多开发者的青睐。本文将从开发者的视角出发,探讨这两种数据库类型的优缺点,并通过具体的代码示例来说明它们在实际开发中的应用。
247 1
|
开发框架 Dart 前端开发
Android 跨平台方案对比之Flutter 和 React Native
本文对比了 Flutter 和 React Native 这两个跨平台移动应用开发框架。Flutter 使用 Dart 语言,提供接近原生的性能和丰富的组件库;React Native 则基于 JavaScript,具备庞大的社区支持和灵活性。两者各有优势,选择时需考虑团队技能和项目需求。
779 8