这是我参与「第五届青训营 」伴学笔记创作活动的第 十四 天
14. Vite 知识体系
14.1 为什么需要构建工具？
前端工程的痛点
前端构建工具的意义
14.2 Vite是什么？Why Vite？
Vite概览
业界案例
当下问题
缓慢的启动->项目编译等待成本高 缓慢的热更新->修改代码后不能实时更新
瓶颈在哪里？
bundle带来的性能开销 JavaScript语言的性能瓶颈
两大行业趋势
浏览器原生ESM支持
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
内置的Web构建能力
14.3 Vite上手使用
项目初始化
使用Sass/Scss & CSS Moudules
使用Scss & CSS Moudules
使用静态资源
生产环境Tree Shaking
Vite：响应迅速，开箱即用
14.4 Vite整体架构
关键技术：依赖预打包
关键技术：单文件编译
关键技术：代码压缩
关键技术：插件机制
Vite Rollup Plugins (patak.dev)
14.5 进阶路线
深入双引擎
esbuild - An extremely fast bundler for the web
Rollup | Rollup (rollupjs.org)
Vite插件开发
为什么需要插件机制？
- 抽离核心逻辑
- 易于拓展
插件 API | Vite 官方中文文档 (vitejs.dev)
复杂度较低的插件：vite/json.ts at main · vitejs/vite (github.com)
复杂度中等的插件：vite/esbuild.ts at main · vitejs/vite (github.com)
代码分割
构建选项 | Vite 官方中文文档 (vitejs.dev)
Configuration Options | Rollup (rollupjs.org)
JS编译工具(Babel)
服务端渲染(SSR)
服务端渲染 | Vite 官方中文文档 (vitejs.dev)
深入浅出 Vite - 神三元 - 掘金小册 (juejin.cn)
Vite社区生态
vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js (github.com)
