👇 今日要闻
打破信息壁垒，走近全球前端。Hello 大家好，我是林语冰。
Vite 和 Webpack 最大的不同就是，Webpack 采用 完全打包模式 ，开发时改一点代码，调试时就会卡半天；而 Vite 采用 非打包模式 按需预构建，追求极致的开发体验。
但今天 Vite 重新走上 Webpack 的老路，来解决大型应用的性能瓶颈。好在有 Rolldown 等 Rust 原生工具链兜底，Vite 仍可以灵活满足不同场景下的开发需求。
Vite 团队官宣 Vite 8.1 正式发布，这是 Vite 8 的 第一个次版本更新，尤大在 Vue 大会上提到的"完全打包模式"开始试验了。
本期我们就来看看 Vite 8 首个次版本的更新内容，以及为何 Vite 不怕重走 Webpack 的老路。
👉 打包开发模式
Vite 的诞生是因为尤大无法忍受 Webpack 开发时打包导致高延迟的开发体验，于是尤大另起炉灶，采用了非打包的开发服务器，推出了开发体验更好的 Vite 原型。
但随着项目规模增加，Vite 的非打包方案在开发时性能下降的问题日益明显，这是因为每个模块都单独加载，浏览器必须处理海量请求，增加启动和刷新开销。
这种性能瓶颈在大型应用中尤为明显，开发者在使用网络代理时则更加严重，刷新速度变慢，开发体验不好。
Vite 8.1 现在实验性支持 打包开发模式，也就是之前类似 Webpack 的 "完全打包模式"。
大型项目只需在 vite.config.js 中配置启用即可：
以一万个 React 组件的大型应用为例，打包开发模式的启动速度暴涨 15 倍，页面完全重载速度飙升 10 倍。这同时保持了 HMR（热模块替换）的即时性，不会受到应用规模的影响。
打包开发模式允许在开发时和生产时打包文件，利用了两者的优势：
- 在 ESM 输出之上保持高效的 HMR（热模块替换）
- 大型应用的启动速度飙升
- 页面刷新时的网络开销狂跌
注意，Vite 8.1 的打包开发模式刚针对浏览器端、基础插件和主要功能开始试验。使用第三方插件或次要功能时，此模式可能无法正常工作。
👉 其他更新
Vite 8.1 刚好对 HTML、CSS 和 JS 这"前端三柱神"的相关功能也进行了改进。
HTML 改进
以前，Vite 只能发现预定义的元素和属性的资源。现在，Vite 支持发现自定义 HTML 元素和属性的资源。
首先，在 vite.config.js 中配置相关的自定义元素和属性：
然后在 HTML 中就能使用这些自定义元素和属性的相关资源：
CSS 改进
Vite 8 开始和 Lightning CSS 合作，这是一个使用 Rust 语言编写的高性能 CSS 工具。
基于此，Vite 8.1 又新增了两大 CSS 功能：
- 允许在 CSS 文件中导入外部 CSS 文件
- 通过插件注册文件依赖
这些功能是 PostCSS 生态支持、但原本尚未通过 Rust 驱动的 Lightning CSS 实现，现在也已经渐进式支持。
更重要的是，在 Vite 的下个主版本中，将会直接采用 Lightning CSS 作为默认的 CSS 预处理器。
ES6 模块相关升级
Vite 8.1 中，import.meta.globe() 支持不区分大小写来匹配文件。
此外，Vite 现在支持 Wasm ESM 集成提案：
这可以导入 .wasm 文件，并直接使用导出的函数，不再需要借助 vite-plugin-wasm 插件。
上述两个是稳定的 ESM 相关功能，此外还有一个实验性的 ESM 功能：代码块导入映射。
在输出的打包中，代码块的 import 导入语句包含该块的哈希值。这确保在代码块内容变化时，新的代码块会被加载。
但这也会导致 import 了变化代码块的另一个代码块的哈希值也发生变化，从而将这种变化传递到所有相关导入的代码块，破坏有效的代码块缓存。
Vite 8.1 基于 Rolldown 支持代码块导入映射，解决了这个问题，并提高了缓存效率。注意，这个新功能目前不支持和 experimental.renderBuiltUrl 实验性选项一起使用。
👉 Vite 现状
Vite 8 在今年第一季度发布，底层工具全部"锈化"，使用 Rust 驱动的 Rolldown 替换了 Go 语言的 esbuild + JS 开发的 Rollup。
现在，Vite 生态的 JS/TS 底层工具链大多采用 Rust 重写，CSS 工具链和 Markdown 工具链也开始采用 Rust "锈化"了，比如本文提及的 Lightning CSS，以及我们之前分享过的《Rust 驱动的 Markdown/MDX 解析器》。
这种 Rust 重写底层工具的趋势会更加明显，而收益也相当可观。
Vite 8 因此人气继续暴涨，每周的下载量直接逼平 Vite 的总下载量。
而随着尤大的 VoidZero 团队加盟 Cloudflare，稳定的资金扶持也得到保证，利用 Cloudflare 的云服务能力，Vite 的生态不再局限在 JS 和 CSS 等前端工具链，未来可能会在全栈开发和持续部署等领域大放异彩。
👇 重点总结
Vite 8.1 正式发布，这是 Vite 8 第一个次版本更新：
- 实验性支持 打包开发模式，解决大型应用的性能瓶颈
- ES6 模块的相关支持改进，支持直接导入
.wasm等 - 渐进式集成 Rust 实现的 Lightning CSS，这是 Vite 未来的 CSS 预处理器
目前 Vite 是前端开发的核心基建，未来 Vite 会成为全栈开发的重要基建。
👍 以上就是本期《前端日报》的全部内容了，如果读完对你有所帮助，可以按赞打卡、在看推荐或转发分享。
🙏 已经关注我的粉丝们，我们下期再见啦，掰掰~~
👇 参考文献：
- 🔗 Vite 8.1 官方博客 ：vite.dev/blog/announ...
- 🔗 Markdown Rust 版 ：mp.weixin.qq.com/s/P56zQxaGl...
- 🔗 Vite 在线体验馆 ：vite.new