Vite知识体系 | 青训营笔记
这是我参加【第五届青训营】笔记创作活动的第11天
01—浅谈构建工具
为什么需要构建工具
01-1—前端工程的痛点
前端工程由一系列的文件资源构成。这些资源可以是逻辑代码JS、TS、JSX；也可以是样式代码CSS、SCSS、LESS；或者一些静态资源PNG、JPEG、WEBP等一些图片格式。
随着更新迭代，诸多工程化问题越来越明显…
- 没有统一的模块化规范；常用的ESM、CommonJS、UMD
- 浏览器的标准赶不上前端开发者的劳动，资源编译存在问题；高级语法的编译
- 产物的语法兼容性存在问题；代码体积，代码性能
- 开发效率；热更新
01-2—前端构建工具的意义
前端构建工具解决了上述问题：
02—Vite概要介绍
Vite是什么？Why Vite？
02-1—Vite概览
定位：新一代前端构建工具
两大组成部分：
1.No-bundle开发服务，源文件无需打包；
2.生产环境基于Rollup的Bundler
核心特性：
1.高性能：dev启动速度和热更新速度非常快！
2.简单易用：开发者体验好。
02-2—业界案例
02-3—当下问题
传统的构建工具存在如下两个问题：
- 缓慢的启动=>项目编译等待成本高；
- 缓慢的热更新=>修改代码后不能实时更新。
开发体验问题日渐显露！
瓶颈在于：
- bundle带来的性能开销；打包过程消耗性能。
- JavaScript语言的性能瓶颈；js单线程语言，没有那么多性能优化手段。
02-4—两大行业趋势
02-5—浏览器原生ESM支持
02-6—基于原生ESM的开发服务优势
02-7—基于Esbuild的编译性能优化
02-8—内置的Web构建能力
那么，我们如何使用Vite呢？
03—Vite上手实战
03-1—项目初始化
03-2—使用Sass/Sacc & CSS Modules
03-3—使用Scss & CSS Modules
03-4—使用静态资源
03-5—使用HMR
Vite的直观印象：响应迅速；开箱即用。
04—Vite整体架构
04-1—关键技术：依赖预打包
为什么要进行预打包？
- 避免node_modules过多的文件请求；
- 将ComminJS格式转换为ESM格式。
实现原理：
- 服务启动前扫描代码中用到的依赖；
- 用Esbuild对依赖代码进行预打包；
- 改写import语句，指定依赖为预构建产物路径。
04-2—关键技术：单文件编译
优势：编译速度提升10-100X
局限性：
- 不支持类型检查；
- 不支持语法降级到ES5.
04-3—关键技术：代码压缩
04-4—关键技术：插件机制
05—Vite进阶路线
05-1—深入双引擎
05-2—Vite插件开发
05-2-1—为什么需要插件机制？
- 抽离核心逻辑；
- 易于拓展。
05-2-2—插件示例
05-2-3—参考资料
05-3—代码分割(拆包)
问题：无法进行并发请求；缓存复用率低。
05-4—JS编译工具(Babel)
出现原因：
- JavaScript语法标准繁多，浏览器支持程度不一样；
- 开发者需要用到高级语法。
