这是我参与「第五届青训营 」伴学笔记创作活动的第26天，学习的是关于 Vite 的知识体系。

Vite 基本概要

构建工具

前端工程的痛点：

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

前端构建工具的意义

• 模块化方案

  • 提供模块加载方案
  • 兼容不同模块规范

• 语法转译

  • 高效语法转译，如：Sass、TypeScript
  • 资源加载，如图片、字体、worker

• 产物质量

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

• 开发资源

  • 热更新

Vite 是什么？

• 定位：vite是下一代前端开发与构建工具。

• 组成部分：

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

• 核心特征：

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

Why Vite？

传统构建工具的问题：

• 启动缓慢 → 项目编译成本高
• 热更新慢 → 修改代码后不能及时更新

前端技术瓶颈：

• bundler 带来的性能开销
• JS语言的性能瓶颈

两大行业趋势：

1. 全球浏览器对原生ESM的普遍支持（目前占比92%以上）
2. 基于原生语言（Go、Rust）编写前端编译工具链，如Go语言编写的Esbuild、Rust编写的SWC

浏览器原生ESM支持

两大要素：

1. scrtpt标签增加 type="module" 属性
2. 使用ESM模块导入导出语法

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

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

基于Esbuild的编译性能优化

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

• 打包器Bundler
• 编译器Transformer
• 压缩器MInifier

性能极高，在Vite中被深度使用

内置的Web构建能力

Vite开箱即用的功能等价于：

Vite的使用

项目初始化

使用Sass/Scss & CSS Modules

使用静态资源

使用HMR

生产环境Tree Shaking

优化原理：

• 基于ESM的import/export语句依赖关系，与运行时状态无关
• 在构建阶段将未使用的代码删除

Vite整体架构

依赖预打包

为什么要预打包？

• 避免node_modules过多的文件请求
• 将CommonJS格式转换为ESM格式

实现原理

• 服务启动前扫描代码中用到的依赖
• 用Esbuild对依赖代码进行预打包
• 改写import语句，指定依赖为预构建产物路径

单文件编译

用Esbuild编译TS/JSX

优势：

编译速度提升10-100x

局限性：

• 不支持类型检查
• 不支持语法降级到ES5

代码压缩

Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具

插件机制

• 开发阶段 → 模拟Rollup插件机制
• 生产环境 → 直接使用Rollup

Vite 进阶路线

深入双引擎

1. Esbuild
2. Rollup.js

Vite插件开发

代码分割（拆包）

拆包前：

拆包后：

问题：

• 无法进行并发请求
• 缓存复用率低

JS编译工具(Babel)

出现的原因：

• JS语法标准繁多，浏览器支持程度不一
• 开发者需要用到高级语法

Babel原理

语法安全降级

服务端渲染(SSR)

一种常见的渲染模式，用于提升首屏性能和SEO优化。

构建阶段

### 代码执行阶段

深入了解底层标准

Vite社区生态

• Github 40k+star(可参考webpack61.3K，rollup21.8k)，并且目前还在持续维护

• 官方提供插件:

  • @vitejs/plugin-vue，提供Vue3支持
  • @vitejs/plugin-vue-jsx提供Vue 3JSX支持
  • @vitejs/plugin-react，提供React支持
  • @vitejs/plugin-legacy提供低版本浏览器降级支持

• 海量社区插件：github.com/vitejs/awes…

• 众多框架内置：