这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
构建工具
为什么需要构建工具
核心要素---资源
JS，TS，PNG，等图片或者代码文件等文件。
将项目模块化，前端没有统一的规范
资源编译，是JS，TS等能够被各种浏览器运行。
产物质量，代码压缩，未使用的代码舍弃。
开发效率，改变代码后想要马上看到效果。
前端构建工具的意义
- 模块化方案 --------------------- 提供模块化加载方案，兼容不同模块规范
- 语法转移 ------------------------ 高级语法转移，如webpack那样
- 产物质量 ------------------------ 产物压缩，取出无用代码
- 开发效率 ------------------------ 热更新
Vite
新一代的前端构建工具
两大组成部分：
No-bundle开发服务，源文件不需要打包
生产环境基于Rollup的Bundler
特征：
- 高性能，dev启动速度和热更新非常快
- 简单好用
传统的构建工具的问题：
- 缓慢启动，编译等待成本高
- 热更新慢，修改代码不能及时更新
开发者体验差
瓶颈？
bundle打包过程中的性能开销大。
JS的语言性能瓶颈。
业界的两大趋势
- ESM的全球浏览器的原生支持比92%以上
- 基于原生语言GO，Rust编写前端编译工具链，如Go编写的Esbuild、Rust编写的SWC，速度十分惊人
Vite原生ESM的开发优势
无需打包项目源代码，天然按需加载，可以利用文件级的浏览器缓存
使用Esbuild对编译性能优化。
如何使用Vite
项目初始化
# 安装pnpm包管理工具
npm i -g pnpm
# 初始化命令
pnpm create vite
# 安装依赖
pnpm install
# 启动项目
npm run dev
pnpm create vite 之后在终端输入项目名称和框架等信息就能完成初始化
使用Sass对样式进行设置
sass对classname进行哈希，防止样式串了。同时也支持一些更高级的语法，比如说样式的嵌套。
# 安装
pnpm i sass -D
使用
例如在react中，将index.module.scss与index.tsx放在components中的同一个目录如:Header下。
在index.tsx中通过import导入样式，在classname中通过className={xx.header}完成样式设置。
这里引入的是.header的设置。
静态资源的设置
直接import静态资源到tsx中。
如一张图片。<img src="{xxxxx}"/>
在页面中的原代码变成了相对路径的名称
这个路径给vite dev server 发起请求。vite dev server将图片内容放回给浏览器显示
Vite支持JSON，Worker等文件支持。
无需自动配置，自动开启的HMR
在运行时，修改某些样式。页面中某些元素的状态不变。
生产环境的 Tree Shaking
Tree Shaking 在 Vite 中无需配置，默认开启
- 基于ESM的import/export 语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Vite插件开发
- 服务启动阶段
- 请求响应阶段
- 热更新阶段
- 服务关闭阶段 各个阶段相关的钩子要去官方文档查看。开发中可能会使用。
代码分割
以前的打包工具只会产生一个bundle，也就是一个文件。
那么就不能进行并发的请求，浏览器的优势就没有体现。缓存复用率低。
拆包后，某一文件代码改了只会影响他自己的包，其他文件是没有影响的。能够达到更好的缓存复用效果，提高用户体验。
结语：
本节课简单介绍了Vite以及Vite的使用，使用Sass配置css，静态资源在Vite中的加载，Tree Shaking等内容。后面还简要介绍了Vite的插件开发。后续深入学习应该还得看文档。
引用参考：
Vite 基本概要 - 掘金 (juejin.cn)
Vite 上手实战与架构解析 - 掘金 (juejin.cn)
Vite 进阶路线 - 掘金 (juejin.cn)
