大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是 Vite 4.4版本的发布，同时带着大家一起来聊聊 Vite 4.4 的诸多新特性。深入后面内容阅读之前非常建议大家提前阅读相关专题，以下是已发表的与 Vite 强相关的文章传送门：

《 Vite大火！Snowpack 如何！》《 Snowpack 摸鱼！Vite 接管！ 》《 Vite 反复提到 WMR 是何方神圣 ！ 》《 Vite 成功背后的人！Rollup！ 》《 Vite 优于Create-React-App (CRA) 的4个原因！ 》《 Vite/snowpack如何用 esbuild 提升 100x 构建速度！》《 是时候考虑用SWC替换Terser了！》《 Vite 4.3发布！15+优化策略带来1.5x ~2x 性能提升！》1.什么是 Vite

Vite 是由 Evan You 推出的下一代前端构建工具，是官方 Vue CLI 的替代品，速度非常快。Vite 利用原生 ESM 并使用 Rollup 处理开发和打包工作。 从功能上讲，它的工作方式类似于预配置的 webpack 和 webpack-dev-server，但在速度方面具有无可比拟的优势。

Vite 具有以下明显特征：

强大的 HMR 支持：Vite 提供了一个 HMR API， 在应用程序运行时交换、添加或删除模块，无需完全重新加载，显著加快开发过程。开箱即用的Typescript支持： Vite 使用名为 esbuild 的JavaScript 打包器将 TypeScript 代码转换为 JavaScript。Vite 在提供的所有 JavaScript 文件中检测类裸模块导入，并将它们重写为解析路径以反映包在 node_modules 文件夹中的位置，以便浏览器可以正确处理它们。开箱即用地支持 Vue3 单文件组件 、Vue 3 JSX 组件和 Vue 2 组件，还支持 JSX 文件（.jsx、.tsx）、CSS 文件导入、PostCSS、CSS 模块和 CSS 预处理器，如 Sass、LESS 和 Stylus。

接下来一起看看 Vite 4.4都带来了哪些新特性。

2.Lightning CSS 的实验性支持2.1 什么是 Lightning CSS

Lightning CSS 是一个用 Rust 编写的极快的 CSS 解析器、转换器和压缩器。可以将其与 Parcel 一起使用，也可以作为独立库或 CLI，或通过插件与任何其他工具一起使用。

Lightning CSS 具有以下非常优秀特性：

速度极快 ：解析和压缩大文件可在几毫秒内完成，输出通常比其他工具小得多，同时进行了大量的优化，比如：属性合并、 减少 calc() 表达式、颜色尽量转换为较短的十六进制表示法等等浏览器级解析器 ： Lightning CSS 构建于 Mozilla 创建并由 Firefox 和 Servo 使用的 cssparser 和选择器箱之上。 这提供了坚实的通用 CSS 解析基础，在此基础上 Lightning CSS 实现了对所有特定 CSS 规则和属性的支持。支持供应商前缀 ： Lightning CSS 接受浏览器目标列表，并自动添加（和删除）供应商前缀，同时支持选择加入浏览器列表配置，以解析浏览器目标并与现有的工具和配置设置集成。

目前 Lightning CSS 在 Github 上通过 MPL-2.0 协议开源，有超过 3.9k 的 star、34.7k 的项目依赖量、NPM 周平均下载量 150k+、代码贡献者 50+，是一个值得关注的前端优质开源项目。

2.2 Vite 4.4 实验性支持 Lightning CSS

从 Vite 4.4 开始，实验性支持 Lightning CSS。 开发者可以通过将 css.transformer: 'lightningcss' 添加到 Vite 配置文件并安装可选的 lightingcss 开发依赖项来启用。 如果启用，CSS 文件将由 Lightning CSS 而不是 PostCSS 处理。

图片来自Tom Smykowski的《Vite.js 4.4 Is The Spiderman In An Epic Rust-Related Crossover》

Lightning CSS 还可以通过 build.cssMinify: 'lightningcss' 用作 CSS 压缩器。

3.Vite 4.4 升级 esbuild v0.183.1 esbuild v0.18 新特性

esbuild 0.18 包含向后不兼容的更改， 为了避免自动选择该版本，开发者可以在 package.json 文件中固定 esbuild 的确切版本（推荐），或者使用仅接受 patch 升级的版本范围语法，例如 ^0.17.0 或 ~0.17.0。

此版本中的重大更改主要集中于修复 esbuild 处理 tsconfig.json 文件的一些长期存在的问题。 以下是此版本中的所有更改的详细信息：

添加在线尝试 esbuild 的方法esbuild 的 tsconfig.json 支持的更改添加针对 Safari 16.2 及更早版本中的错误的解决方法修复 esbuild 的 TypeScript 类型声明以禁止未知属性修复伪元素的 CSS 嵌套转换禁止在嵌套 CSS 中的类型选择器之前使用 &

以上更改的详细细节可以参考文末的资料，这里不再过多展开。

3.2 Vite 4.4 升级 esbuild 0.18

如 3.1 小结所述，esbuild v0.18 包含了对 esbuild tsconfig.json 文件处理的向后不兼容的更改，目前 Vite 官方评估暂时不影响 Vite 用户。

4.create-vite 支持 Solid 和 Qwik 的模板

要创建第一个 Vite 项目，首先可以运行下面命令：

npm create vite@latest// npmyarn create vite// yarnpnpm create vite// pnpm

开发者还可以通过附加命令行选项直接指定项目名称和要使用的模板。例如，要构建一个 Vite + Vue 项目，可以运行下面命令：

//  npm 6.xnpm create vite@latest my-vue-app --template vue// npm 7+, extra double-dash is needed:npm create vite@latest my-vue-app -- --template vue// yarnyarn create vite my-vue-app --template vue// pnpmpnpm create vite my-vue-app --template vue

在 Vite 4.4 版本中除了支持原有的模板外，如：vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts，还支持了 solid, solid-ts, qwik, qwik-ts 等其他应用模板。

开发者可以在 vite.new/solid-ts 和 vite.new/qwik-ts 上在线试用。

5.官方文档变更

Vite 的文档现已翻译成韩语，可在 ko.vitejs.dev 获取。

6.其他新 feat 变更预览模式添加键盘快捷键asset 类型支持emit 事件来处理 chunk 加载错误导入公共 non-asset URLfs.allow 的支持文件当动态导入模块与静态导入并存时输出警告在页面重新加载时添加去抖添加 WebSocket 连接事件友好的 ESM 文件需要错误支持导入预处理样式支持内联样式的图像集支持子导入模式支持 glob include7.本文总结

本文主要和大家介绍 Vite 4.4 版本的发布，同时带着大家一起来聊聊 Vite 4.4 的诸多新特性。相信通过本文的阅读，大家对 Vite 4.4 的本次变更内容会有一个初步的了解。

因为篇幅有限，关于 Vite 4.4 的更多用法和特性文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏，您的支持是我不断创作的动力。

参考资料