这是我参与 第五届青训营 伴学笔记创作活动的第15天
课程概要
- 浅谈构建工具
- Vite概要介绍
- Vite上手实战
- Vite整体架构
- Vite进阶路线
一、为什么需要构建工具
(一）、前端工程的痛点
浏览器标准赶不上前端开发者的体验
（二）、前端构建工具的意义
二、Vite是什么？为什么是Vite
（一）、Vite概览：
新一代前端构建工具
（二）、业界案例 开发速度，热更新速度
（三）、当下问题、
（四）、行业趋势
1.
两个要素
- script标签增加type="module属性
- ESM模块导入到处语法
（五）、基于原生ESM的开发服务优势
（六）、基于Esbuild的编译性能优化
（七）、内置Web构建能力
开发对比：
三、Vite如何使用
（一）、项目初始化
（二）、使用Scss CSS Modules
（三）、引入静态资源
（四）、使用HMR
（五）、生产环境Tree Shacking
（六）、Vite的直观印象
四、Vite的整体架构
（一）、关键技术 单文件编译
（二）、关键技术 代码压缩
（三）、关键技术 插件机制
五、Vite进阶路线
（一）、深入双引擎
（二）、为什么需要插件机制
（三）、 为什么需要插件开发
插件实例
参考资料：
（四）、代码分割 拆包
（五）、JS必备工具Bable
(六）语法安全降级
（七）、服务端渲染
（八）、深入了解底层标准
（九）、Vite社区生态
