这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天。
今日学习内容：Vite相关知识体系
一、为什么需要构建工具
核心要素：资源管理
需要同时关注模块化、资源编译、产物质量与开发效率问题
前端构建工具意义重大：
- 模块化方案：提供模块加载方案、兼容不同模块规范
- 语法转译：高级语法转译（如Sass、Typescript）、资源加载（如图片、字体、worker）
- 产物质量：产物压缩、无用代码删除、语法降级
- 开发效率：热更新
二、什么是Vite？为什么使用Vite？
定位：新一代前端构建工具
组成部分：
- No-bundle开发服务、源文件无需打包
- 生产环境基于Rollup的Bundler
核心特征：
- 高性能：dev启动速度和热更新速度非常快
- 简单易用，开发者体验好
两大行业趋势：
1. 浏览器原生ESM支持
两大要素：
- script标签增加
type="module"属性 - 使用ESM模块导入导出语法
开发优势：
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
2. 基于Esbuild
基于Golang开发的前端工具，具备能力有：
- 打包器Bundle
- 编译器Transformer
- 压缩器Minifier
性能极高，在Vite中被深度使用
三、Vite上手使用
1. 项目初始化
2. 使用Sass/Scss & CSS Modules
3. 使用静态资源
四、Vite整体架构
关键技术1：依赖预打包
为什么要进行预打包？
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术2：单文件编译
使用Esbuild编译TS/JSX
优势：编译速度提升10-100倍
局限性：
- 不支持类型检查
- 不支持语法降级到ES5
关键技术3：代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
关键技术4：插件机制
开发阶段：模拟Rollup插件机制
生产环境：直接使用Rollup
五、Vite进阶路线
深入双引擎：可参考Esbuild与Rollup官方文档
Vite插件开发：为什么需要插件？
- 抽离核心逻辑
- 易于扩展
代码分割（拆包）：
服务端渲染：
