Vite笔记｜ 青训营

Vite（发音为"veet"）是一个现代化的前端构建工具，旨在提供快速的开发体验和优化的构建性能。它采用了基于ES模块的开发服务器和构建流程，使得在开发过程中能够快速地启动项目，并实现即时热更新，同时在构建时能够生成高度优化的静态资源。

Vite具有以下几个显著的特点：

• 快速冷启动：Vite利用ES模块的本地缓存，通过按需编译的方式实现了快速的冷启动时间。这意味着在开发过程中，你可以立即看到修改的效果，无需等待。

• 即时热更新：Vite通过WebSocket和HMR（Hot Module Replacement）技术，实现了即时的热更新。当你修改代码时，只会更新相关的模块，而不是整个页面。这保证了开发过程中的快速反馈。

• 原生ES模块支持：Vite直接支持ES模块，无需进行打包。这意味着你可以在浏览器中直接加载和使用npm包，而无需进行额外的构建操作。

• 多种预编译支持：Vite支持使用TypeScript、JSX、CSS等预编译语言，你可以在项目中灵活选择所需的预编译方式。

• 插件化架构：Vite采用了插件化架构，你可以通过插件来扩展Vite的功能。官方提供了丰富的插件，同时也支持自定义插件。

为什么要选择vite作为前端项目的构建工具？

两大组成部分

1. No-bundle开发服务，源文件无需打包
2. 生产环境基于Rollup的Bundler

核心特征

1. 高性能，dev启动速度和热更新速度非常快
2. 简单易用，开发者体验好

传统构建工具的问题

1. 缓慢的启动，项目编译等待成本高
2. 缓慢的热更新，修改代码后不能实时更新

瓶颈

• bundle带来的性能开销
• JavaScript语言的性能瓶颈

在如上的问题的背景下的两大行业趋势

• 全球浏览器对原生ESM的普遍支持

• 基于原生语言（Go、Rust）编写前端编译工具链

  • 如Go语言编写的E是build、Rust编写的SWC

基于原生ESM的开发服务优势

• 无需 打包项目源代码
• 天然的按需加载
• 可以利用文件级的浏览器缓存

vite本质上是一个dev开发时的server把浏览器的请求进行承接然后进行编译，然后将浏览器能够识别的语法响应给浏览器

基于Esbuild的编译性能优化

Esbuild——基于Golang开发的前端工具，具备如下能力：

1. 打包器Bundler
2. 编译器Transformer
3. 压缩器Minifier

总结

从发展的趋势来看，新一代前端构建工具Vite将在未来大放异彩，最近 Vue 的官方团队成员Patak发布了一篇叫做《The Vite Ecosystem》的文章，Vite 确确实实会成为将来的一个趋势。这是因为在他的文章里我看到了很多很牛B的开源项目都在使用Vite，不仅如此，还有相当多的团队以及大佬们在和Vite团队进行合作(帮忙修复bug、新增feature等)，这就证明了Vite现在已经得到了各路大佬们的认可了。有了大佬们的支持，相信就能够打消很多人心中的疑虑了。