当前位置: 首页 > 科技观察

Vite4.0正式发布!你知道有哪些更新吗?

时间:2023-03-11 21:47:36 科技观察

大家好,我叫CUGGZ。12月9日,Vite4.0正式发布。一起来看看Vite4.0有什么新变化吧!与Vite3相比,本次大版本的更新范围更小,主要目标是升级到Rollup3。Vite团队与生态系统紧密合作,确保顺利升级到新的大版本。Rollup3Vite4.0使用Rollup3,这让我们可以简化Vite内部的资源处理,并且有很多改进。Vite核心monorepo框架插件@vitejs/plugin-vue和@vitejs/plugin-react从Vite的第一个版本开始就是Vite核心monorepo的一部分。这有助于在进行更改时形成紧密的反馈循环,因为核心和插件是同时测试和发布的。使用vite-ecosystem-ci,可以通过在单独存储库上开发的这些插件获得此反馈,因此自Vite4以来,它们已从Vite核心monorepo中移出。用于在开发期间使用SWC的新React插件SWC现在是Babel的成熟替代品,尤其是在React项目中。SWC的Reactfast-rerefresh比Babel快很多,对于一些项目来说SWC现在是更好的选择。从Vite4开始,有两个插件可用于不同的React项目。(1)@vitejs/plugin-react@vitejs/plugin-react是一个使用esbuild和Babel实现快速HMR的插件,它具有更小的包占用空间和能够使用babel转换管道的灵活性。(2)@vitejs/plugin-react-swc(new)@vitejs/plugin-react-swc是一个新的插件,它在构建过程中使用esbuild,但在开发过程中将Babel替换为SWC。对于不需要非标准React扩展的大型项目,冷启动和热更新(HMR)速度更快。兼容性现代浏览器构建现在默认以Safari14为目标,以获得更广泛的ES2020兼容性。这意味着现代构建现在可以使用BigInt而不再转换null合并运算符。如果你需要支持旧的浏览器,你可以像往常一样添加@vitejs/plugin-legacy。将CSS作为字符串导入在Vite3中,.css文件的默认导出可能会引入CSS的双重加载。从'./global.css'导入cssString;这种双重加载之所以会发生,是因为发出了.css文件,而且应用程序代码很可能也使用了css字符串。从Vite4开始,不推荐使用.css默认导出。在这种情况下,需要使用?inline查询后缀修饰符,因为它不会发出导入的.css样式。importstufffrom'./global.css?inline'其他函数在预打包依赖时支持补丁包;更简洁的构建日志输出并切换到kB以与浏览器开发工具保持一致;Vite4.0更新详情:https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md