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…

相关文章
|
C语言 C++ 容器
【数据结构】二叉搜索树(二叉排序树)
本文介绍了二叉搜索树(Binary Search Tree, BST)的定义、实现及其性能分析。二叉搜索树是一种特殊的二叉树,其特点是左子树所有节点值小于根节点值,右子树所有节点值大于根节点值,且每个子树也满足此特性。文中详细讲解了BST的节点结构、插入、查找、删除等操作的实现,并通过C++代码展示了这些功能。此外,还讨论了BST的性能:在理想情况下,时间复杂度接近O(logN),但在最坏情况下可能退化为O(N)。为了提高效率,后续将学习自平衡二叉搜索树如AVL树和红黑树。掌握BST有助于理解STL中的set和map容器。感谢阅读,欢迎点赞支持。
1625 9
|
机器学习/深度学习 人工智能 自然语言处理
生成式人工智能入门指南
生成式 AI 是人工智能的一个子领域,专注于通过学习现有数据的模式创建新内容或生成解决方案。它是一种鼓励 AI 系统利用对数据结构的理解自主生成新颖、类似于人类的输出的方法。这可以采用图像、文本、音乐或甚至是代码的形式呈现。
619 3
|
Ubuntu NoSQL Linux
MongoDB安装教程—Ubuntu
MongoDB安装教程—Ubuntu
1550 0
MongoDB安装教程—Ubuntu
|
机器学习/深度学习 大数据 测试技术
论文阅读笔记 | MLP系列——MLP-Mixer
论文阅读笔记 | MLP系列——MLP-Mixer
901 0
论文阅读笔记 | MLP系列——MLP-Mixer
|
人工智能 前端开发 数据挖掘
真实场景|芯片研发平台如何真正实现一体化混合云调度?
AI芯片设计公司X面临多项目并行研发的高并发算力缺口,本地集群资源紧张。为解决混合调度和成本可控的难题,X公司引入MemVerge的EDA混合云研发平台。该平台统一调度本地与云端资源,无缝兼容现有工作流程,智能动态扩缩容,优化成本。例如,在前端回归验证中,3000个job通过优先使用本地2500核集群,剩余1000个job自动调度至云端运行,确保高效处理。对于新项目紧急任务,平台智能分配云上资源,并收集运行数据优化后续调度。
487 4
|
存储 数据库 索引
数据库索引的作用
【7月更文挑战第2天】数据库索引的作用
934 3
|
XML Java 数据格式
肝了30天总结,史上最全面透彻的Spring核心原理分析和27道高频面试题
在阅读面试题之前,小伙伴们可以先看看我之前发布的系列文章,Spring核心原理包括源码分析和用30个类手写。面试刷题固然很重要,但是知其然知其所以然更重要。
2345 4
肝了30天总结,史上最全面透彻的Spring核心原理分析和27道高频面试题
|
缓存 JavaScript 前端开发
【前端】Vue2知识点大全!
【前端】Vue2知识点大全!
895 1
【前端】Vue2知识点大全!
|
数据可视化 搜索推荐 Java
【日志】ELK日志处理集群部署
文章目录 前言 一、概念/使用环境 二、组件详解 2.1 elasticsearch 2.2 kibana
551 0
【日志】ELK日志处理集群部署