这是我参与第五届青训营伴学笔记创作活动的第2天。
Vite
Vite是下一代前端开发与构建工具，提供开箱即用的配置。与传统前端构建工具相比，Vite的启动速度和更新速度非常快，同时它的插件API和JS API拥有高度可扩展性，并由完整的类型支持。
Vite两大组成：
- No-bundle 开发服务，相当于一个node.js的devserver，开发阶段的源文件不需要打包，这是与传统构建工具最大的不同
- 生产环境基于Rollup的Bundler进行定制和优化，将所有业务代码进行打包
核心特征
- 高性能，dev启动速度和更新速度很快
- 简单易用
传统构建工具的问题
- 启动慢
- 热更新缓慢
这些问题瓶颈来源于：
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
基于传统工具的问题背景下，出现两种趋势：
- 全球浏览器对原生ESM普遍支持（占比约92%）
- 基于原生语言(Go、Rust)编写前端编译工具链
- Esbuild：基于Go编写
- SWC：基于Rust编写，对标Babel
Vite Dev Server
script标签新增了type=”module”属性，从而可以在script标签里编写ESM语句。当浏览器遇到这种script标签，就会发送请求给Vite Dev Server，然后由Vite Dev Server编译文件内容，并且交给服务器。
基于原生ESM开发有以下优势
- 无需打包项目源代码，一个文件就是一个请求
- 按需加载，只有被用到的文件才会发送请求
- 利用文件级别的浏览器缓存，当文件被修改，只是该文件的缓存失效，无需请求整个项目的文件。
Vite架构
开发环境由Esbuild预打包和模拟Rollup的插件机制构成，生产环境由Esbuild进行代码压缩，直接使用Rollup来处理插件。
Vite的插件既可用于生产环境和开发环境中。
总结
随着Vite快速发展，现在越来越多开发者使用Vite，在2023年，掌握Vite构建项目于开发变得重要。
