这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
一、为什么需要构建工具？
前端工程的痛点
-
模块化
- ESM、CommonJS、UMD
-
资源编译
- 高级语法的编译
-
产物质量
- 代码体积、代码性能
-
开发效率
- 热更新
前端构建工具的意义
二、Vite是什么？Why Vite?
Vite概览
定位：新一代前端构建工具 两大组成部分：
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
云核心特征
- 高性能，dev启动速度和热更新速度非常快！
- 简单易用，开发者体验好
当下问题
- 缓慢的启动->项目编译等待成本高
- 缓慢的热更新->修改代码后不能实时更新
瓶颈在哪里？
- bundle带来的性能开销
- JavaScript语言的性能瓶颈
两大行业趋势
1、全球浏览器对原生ESM的普遍支持（目前占比92%以上)。
2、基于原生语言(Go、Rust)编写前端编译工具链，如Go语言编写的Esbuild、Rust编写的SWC
浏览器原生ESM支持
两大要素：
- script标签增加type="module"属性
- 使用ESM模块导入导出语法
三、Vite上手使用
项目初始化
生产环境Tree Shaking
优化原理：
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Tree Shaking在Vite中无需配置，默认开启！
Vte给你最直观的印象如何？
- 响应迅速
- 开箱即用
四、Vite整体架构
关键技术：依赖预打包
为什么要进行预打包？
- 避免node_modules过多的文件请求
- 将CommonJS格式转换为ESM格式
实现原理：
- 服务启动前扫描代码中用到的依赖
- 用Esbuild对依赖代码进行预打包
- 改写import语句，指定依赖为预构建产物路径
关键技术：单文件编译
用Esbuild编译TS/JSX
-
优势：编译速度提升10-100×
-
局限性：
- 不支特类型检查
- 不支持语法降级到ES5
关键技术：代码压缩
Esbuild作为默认压缩工具，替换传统的Terser、UgIify.js等压缩工具
关键技术：插件机制
- 开发阶段->模拟Rollup插件机制
- 生产环境->直接使用Rollup
五、Vite进阶路线
深入双引擎
推荐学习顺序：
- 先了解基本使用，动手尝试各项常用配置；
- 然后学习其插件开发。
