Vite知识体系|青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第11天，关于Vite知识体系的知识点总结，包括：浅谈构建工具和如何使用Vite。

———Zy_Thomas

浅谈构建工具

前端为什么要构建工具

前端工程的痛点

• 模块化（ESM、CommonJS、UMD）
• 资源编译：高级语法的编译
• 产物质量：代码体积、代码性能
• 开发效率：热更新

前端构建工具的意义

• 模块化方案

1. 提供模块加载方案
2. 兼容不同模块规范

• 语法转译

1. 高级语法转译，如：Sass、Typescript
2. 资源加载，如图片、字体、worker

• 产物质量

产物压缩、无用代码删除、语法降级

• 开发效率

热更新

Vite是什么？Why是Vite

定位：新一代前端构建工具

两大组成部分：

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

核心特征：

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

其他工具的问题：

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

瓶颈所在：

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

两大行业趋势：

• 全球浏览器对原生 ESM 的普遍支持（目前占比 92% 以上）

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

• 如 Go 语言编写的 Esbuild、Rust 编写的 SWC

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

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

基于Esbuild的编译性能优化

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

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

如何使用Vite

项目初始化

1. 项目初始化

• 安装pnpm npm i -g pnpm
• 初始化命令 pnpm create vite
• 安装依赖 pnpm install
• 启动项目 npm run dev