这是我参与「第四届青训营 」笔记创作活动的的第9天

前端构建工具的意义

1. 模块化方案：提供模块加载方案；兼容不同模块规范
2. 语法转译：高级语法转译，如Sass、TypeScript；资源加载，如图片、字体、worker
3. 产物质量：产物压缩、无用代码删除、语法降级
4. 开发效率：热更新

Vite是什么？为什么选择Vite？

定位：新一代前端构建工具9 两大组成部分：

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

核心特征：

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

两大行业趋势

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

浏览器原生ESM支持

两大要素：

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

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

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

基于Esbuild的编译性能优化

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

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

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

默认集成度

Vite的默认集成度非常高，我们可以对应Webpack的功能来看

1. Vite配置

2. Webpack配置（等价于上述Vite）

Vite整体架构

依赖预打包

为什么要预打包？

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

实现原理

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

单文件编译

用Esbuild编译TS/JSX 优势：编译速度提升10-100x 局限性：

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

代码压缩

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

插件机制

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