这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
课程重点
- 前端工程的痛点
- 前端构建工具的意义
- Vite 概览
- Vite 业界案例
- Vite 优势
- 项目初始化
- 使用 Sass/Scss & CSS Modules
- 使用静态资源
- 生产环境 Tree Shaking
- 深入双引擎
- Vite 插件开发
- 代码分割(拆包)
- JS 编译工具(Babel)
- 语法安全降级
- 服务端渲染(SSR)
- 深入了解底层标准
- Vite 社区生态
前端工程的痛点
- 模块化：ESM、CommonJS、UMD
- 资源编译：高级语法的编译
- 产物质量：代码体积、代码性能
- 开发效率：热更新
前端构建工具的意义
Vite概览
Vite是什么？为什么要选择Vite？
业界案例
感受一下Vite的高效：
当下问题
- 缓慢的启动-->项目编译等待成本高
- 缓慢的热更新-->修改代码后不能实时更新
两大行业趋势
浏览器原生ESM支持
基于原生ESM的开发服务优势
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
基于Esbuild的编译性能优化
内置的Web构建能力
Vite上手实战与构架解析
项目初始化
使用Sass/Scss & CSS Modules
生产环境-Tree-Shaking
- 基于ESM的import/export语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Vite最直观的印象：响应迅速、开箱即用
Vite整体架构
文件编译
代码压缩
插件机制
Vite进阶路线
深入双引擎
为什么需要插件机制？
- 抽离核心逻辑
- 易于拓展
Vite插件开发
代码分割（拆包）
JS编译工具（Babel）
语法安全降级
服务端渲染（SSR）
深入了解底层标准
Vite社区生态
