这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
一、本堂课重点内容：
-
本堂课的知识要点有哪些？
- 前端工程的痛点
- 前端构建工具的意义
- Vite 概览
- Vite 业界案例
- Vite 优势
- 项目初始化
- 使用 Sass/Scss & CSS Modules
- 使用静态资源
- 生产环境 Tree Shaking
- 深入双引擎
- Vite 插件开发
- 代码分割(拆包)
- JS 编译工具(Babel)
- 语法安全降级
- 服务端渲染(SSR)
- 深入了解底层标准
- Vite 社区生态
二、详细知识点介绍：
- 本堂课介绍了哪些知识点？
vite介绍
老生常谈，vite是前端构建工具，vite能支持模块化、资源（包括高级语法）编译、产物质量高（代码体积/性能）、热更新提高开发效率。
构建工具的意义：
vite的定位是新一代前端构建工具。包括两个部分：开发阶段：no-bundle服务，源文件无需打包devserver；生产环境是基于rollup的bundler
vite的核心特征：高性能、简单易用
传统构建工具的问题：编译等待成本高、修改代码后不能实时更新（热更新缓慢）。瓶颈在于bundle的性能开销和js语言本身的效能。
行业趋势：全球浏览器对原生ESM的普遍支持。基于原生语言编写前端编译工具链（esbuild/go、SWC/rust）
ESM支持：html script标签增加type="module", js export const foo='foo'。基于vite dev server， 浏览器发送请求，vite dev server接受请求后进行自定义编译，返回给浏览器，呈现浏览器可识别的元素。优点：无需打包项目源代码、天然按需加载、利用文件级浏览器缓存
基于Esbuild的编译性能优化：vite深度使用Esbuild，性能很高。Esbuild是基于Golang开发的前端工具，有打包器bundler、编译器transformer、压缩器minifier组成。
vite开箱即用的功能等价于很多的webpack包的集成，且配置文件更加简单。
vite的使用
安装pnpmnpm i -g pnpm
初始化pnpm create vite
安装依赖pnpm install
启动项目npm run dev
使用sass/scsspnpm i sass -D
用css module可以防止样式污染
使用静态资源：vite中可以直接引入’svg‘、json、worker等
生产环境的tree-shaking（默认开启）：优化原理：基于ESM的import/export语句关系（commonjs不可用），与运行时状态无关，在构建阶段将未使用的代码进行删除。build命令进行tsc的类型检查，然后再打包vite build
vite整体架构
开发环境的预打包：为了避免node_modules过多的文件请求，将commonjs格式转化为ESM格式。实现原理：服务启动前扫描代码中用到的依赖，用esbuild对依赖代码进行预打包，改写import语句，指定依赖为预构建产物路径。
局限性：vite不支持类型检查，不支持语法降级到es5
插件机制：plugin可以用到开发和生产两个阶段。为了抽离核心逻辑，易于扩展，实现解耦
vite进阶路线
vite的底层依赖：esbuild、rollup。官方文档很好， Esbuild 官方文档，Rollup 官方文档入门后可以学习插件开发。
插件开发，写钩子。 Vite 插件开发文档
代码分割（拆包）：以前只有一个bundle，不能并发请求，缓存复用率低。如果拆包，可以改善上面两个缺点。底层实现依赖rollup，去学一下。
语法降级：js编译工具：babel。核心code-AST-code，需要了解babel插件开发。
服务端渲染SSR：提升首屏性能和SEO优化。
学习时要深入了解底层标准，如ESM规范、CJS规范、HTTP 2.0特性等。
vite社区生态
三、实践练习例子：
- 有什么实践举例帮助理解知识点？
四、课后个人总结：
- 本章有什么知识点不容易掌握？
- 今日的知识是webpack的延伸，vite
- 什么地方容易与其他内容混淆？
五、引用参考：
- 我参考了哪些外部博客/笔记/文章？
- 《React 与 Immutable 数据流实战》
- Vite 静态资源处理
