这是我参与「第四届青训营 」笔记创作活动的第13天
本节笔记的主要内容是围绕前端构建工具Vite展开讨论三大问题——是什么？为什么？怎么用？以及简单介绍Vite的整体架构和进阶之路。
为什么要用 Vite
其实原因和上一节Webpack很类似，前端的核心要素是资源——JS、TS、CSS、LESS、PNG... 要在前端工程中导入这些资源，会产生以下几方面问题
- 模块化——ESM、CommomJS、UMD
- 资源编译——高级语法的编译，例如JSX等语言，浏览器本身是不能直接识别的，而需要我们进一步编译后再放到浏览器中
- 产物质量——代码体积、代码质量是需要进一步优化的，以及产物的语法兼容性，高级语法项目放到低级浏览器里是无法运行的。
- 开发效率——在改动代码后立刻看到效果，热更新，如果缺少构建工具很难实现
Vite概览
响应迅速 开箱即用
定位：新一代前端构建工具 两大组成部分：
- No-bundle 开发服务，源文件无需打包
- 生产环境基于 Rollup 的 Bundler 核心特征：
- 高性能，dev 启动速度和热更新速度非常快！
- 简单易用，开发者体验好
下图是 Webpack 和 Vite 的对比，可见，Vite 的启动速度和热更新速度是大大缩短的
开发体验问题日渐显露
两大行业趋势：
全球浏览器对原生ESM的普遍支持（目前占比92%以上）
两大要素：
- scrtpt标签增加 type="module" 属性
- 使用ESM模块导入导出语法
Vite Dev Server
Vite基于原生ESM的开发服务优势开发了Vite Dev Server，对浏览器的请求进行接收，编译文件内容，再将内容返回给浏览器
优势
- 无需打包项目源代码，去除了Budler的开销
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于原生语言（Go/Rust）编写前端编译工具链（如 Go 语言编写的Esbuild、Rust编写的SWC）
内置的Web构建能力
如何使用Vite
项目初始化
- 使用Sass/Scss & CSS Modules
- 使用静态资源
- 使用HMR
- 生产环境Tree Shaking
Vite整体架构
关键技术
依赖预打包
单文件编译
用Esbuild编译TS/JSX，可以将编译速度大大提升10-100倍，但是不支持类型检查和语法降级到ES5
代码压缩
Esbuild代码压缩性能良好
插件机制
Why? 抽离核心逻辑；易于拓展
Vite 进阶路线
深入双引擎
路线：先了解基本使用，动手尝试各种常用配置，然后学习其插件开发
Esbuild官方文档
Rollup官方文档
Vite插件开发
路线：先看文档，过一遍插件钩子功能，然后多学习其他插件的实现，掌握套路。
通过钩子函数，在不同的构建阶段插入自定义逻辑
其他
- 代码分割（拆包）
- JS编译工具（Bable）
- 语法安全降级
- 服务端渲染（SSR）
- 深入了解底层标准
- Vite社区生态
小结
通过本节学习可以体会到Vite的响应迅速，开箱即用的优势是很明显的，但是身为小白的我还是没办法深刻体会到Vite的用法与优势所在，还是要动手实践一下比较好。最近在发愁大作业，忙完再研究。
