这是我参与「第四届青训营 」笔记创作活动的的第13天。本节课的主题是【Vite 知识体系】，授课老师为三元同学。
本篇笔记分别对课程中所讲的几个要点进行一些解读，如若有误，欢迎大家在评论区交流，指出不当之处。
01.为什么需要构建工具
模块化
- 提供模块加载方案
- 兼容不同模块规范
资源编译
- 高级语法转译
- 资源加载
产物质量
- 产物压缩
- 删除dead code
- 语法降级
开发效率
- 热更新
02.Why Vite?
定位
新一代前端构建工具
组成部分
- No-bundle开发服务，无需打包源文件
- 生产环境基于Rollup的Bundler
核心特征
- 高性能，dev启动速度和热更新速度快
- 简单易用，开发者体验好
启动时间快于Webpack Rollup
传统构建工具问题
- 启动缓慢→项目编译等待成本高
- 热更新缓慢
⚠️bundle 性能开销
⚠️JS语言性能瓶颈（解释性，单线程语言，无法优化）
两大行业趋势
-
基于浏览器对原生ESM的普遍支持开发
- ☑️无需打包项目源代码
- ☑️天然按需加载
- ☑️利用文件级浏览器缓存
-
基于原生语言编写前端编译工具链（如SWC）
-
🔥性能高，深度应用于Vite
- 打包器Bundler
- 编译器Transformer
- 压缩器Minifier
-
Vite开箱即用功能对照Webpack
03.Vite上手使用
初始化
使用Sass/Scss & CSS Modules
scss支持高级CSS语法特性，提高开发效率
使用静态资源
生存环境TreeShaking
Node.js更多依赖于运行时结果
ESM基于import/export关系，与运行状态无关
04.Vite整体架构
❓Why预打包
- 避免node_modules过多文件请求
- 将CommonJS格式转化为ESM格式
⭐实现原理
- 启动前扫描代码依赖
- Esbuild预打包
- 改写import
局限性
- Esbuild不支持类型检查
- 不支持语法降级
Esbuild作为默认压缩工具，替代传统压缩工具
插件机制
模仿Rollup插件机制
05.Vite进阶路线
构建双引擎
Esbuild官方文档
Rollup官方文档
学习顺序
- 先了解基本使用，动手尝试各项常用配置
- 然后学习插件开发
Why插件机制
- 抽离核心逻辑
- 易于拓展
插件开发流程
代码分割（拆包）
- 能够并发请求
- 提高缓存复用率
JS编译工具（Babel）
出现原因
- JS语法繁多，浏览器支持程度不同
- 高级语法
语法安全降级
服务端渲染（SSR）
常见渲染方式，用于提升首屏性能&&SEO优化
深入底层标准
CJS规范
ESM规范
HTTP2.0特性
