大家好，我叫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
