这是我参见「第五届青训营」伴学笔记创作活动的第 13 天
前端构建工具的意义
- 模块化方案
- 语法转译
- 产物质量
- 开发效率
Vite是什么
定位：新一代前端构建工具
两大组成部分：
- 1、No-bundle开发工具，源文件无需打包
- 2、生产环境基于Rollup的 Bundler
核心特征：
- 1、高性能,dev 启动速度和热更新速度非常快
- 2、简单易用，开发者体验好
浏览器原生 ESM 支持
两大要素：
- script 标签增加 type = “module”属性
- 使用 ESM 模块导入导出语法
基于原生 ESM 的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于 Esbuild 的编译性能优化
Esbuild —— 基于 Golang 开发的前端工具，具备如下能力：
- 打包器 Bundler
- 编译器 Transformer
- 压缩器 Minfier
性能极高，在 Vite 中被深度使用
上手使用
- 项目初始化
- 使用 Sass/Scss & CSSModules
- 使用静态资源
- 使用 HMR
- 无需额外配置，自动开启
- 生产环境 Tree Shaking
- 优化原理：
- 1、基于 ESM 的 import/export语句依赖关系，与运行时状态无关
- 2、在构建阶段将为使用到的代码进行删除
- 优化原理：
Vite 整体架构
关键技术：依赖预打包
- 为什么要进行预打包
- 1、避免 node_modules 过多的文件请求
- 2、将CommonJS 格式转换为 ESM 格式
- 实现原理
- 1、服务启动前扫描代码中用到的依赖
- 2、用 Esbuild 对依赖代码进行预打包
- 2、改写import 语句，指定依赖为预构建产物路径
关键技术：单文件编译
- 用 Esbuild 编译 TS/JSX
- 优势：编译速度提升 10-100x
- 局限性：
- 不支持类型检查
- 不支持语法降级到ES5
关键技术：代码压缩
- Esbuild 作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
关键技术：插件机制
- 开发阶段 -> 模拟 Rollup 插件机制
- 生产环境 -> 直接使用 Rollup
