为什么需要构建工具？
- 模块化方案：提高模块加载方案，兼容不同模块规范
- 资源编译：高级语法转译（如 Sass 、TypeScript ），资源加载（图片、字体、worker）
- 产物质量：产物压缩、无用代码删除、语法降级
- 开发效率：热更新
Vite 是什么？
1.定位：新一代前端构建工具。
2.两大组成部分：
- No-bundle 开发服务，源文件无需打包
- 生产环境基于 Rollup 的 Bundler
3.核心特征
- 高性能，dev 启动速度和热更新速度非常快
- 简单易用，开发者体验好
4.瓶颈
- bundle 带来的性能开销
- JavaScript 语言的性能瓶属性
5.浏览器原生 ESM 支持
两大要素：
- script 标签增加 type="module"
- 使用 ESM 模块导入导出语法
6.基于原生 ESM 的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
7.基于 ESbuild 的编译性能优化
ESbuild —— 基于 Golang 开发的前端工具，具备如下能力：
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 minifier
Vite 上手使用
- 项目初始化
- 使用 Sass/Scss & CSS Modules
- 使用静态资源
- 使用HMR
- 生产环境 Tree Shaking
Vite 整体架构
1.依赖预打包
为什么要进行预打包？
- 避免 node_modules 过多的文件请求
- 将 CommonJS格式转换为 ESM 格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用 Esbuild 对依赖代码进行预打包
- 改写 import 语句，指定依赖为预构建产物路径
2.单文件编译
优势
编译速度提升 10-100 x
局限性
- 不支持类型检查
- 不支持语法降级到 ES5
3.代码压缩
Esbuild 作为默认压缩工具，替换传统的 Terser、Uglify.js 等压缩工具
4.插件机制
- 开发阶段 -> 模拟 Rollup 插件机制
- 生产环境 -> 直接使用 Rollup
