这是我参与「 第五届青训营 」笔记创作活动的第15天
一、本堂课重点内容：
- 浅谈构建工具
- Vite概要介绍
- Vite上手实践
- Vite整体架构
- Vite进阶路线
二、详细知识点介绍：
2.1 浅谈构建工具
前端痛点进化过程：
基于开发效率的考虑：出现了各种框架和库，避免重复造轮子
基于运行效率的考虑：出现了各种构建工具（grunt、gulp.js等），对前端代码进行压缩、优化、合并文件等，使文件更小
基于维护效率的考虑：出现了各种模块化工具（require.js、webpack、less等）
构建工具可以提高开发效率，并且可以为生产环境提供高质量的代码。
- 自动化任务：构建工具可以自动执行常见的任务，例如编译代码、压缩文件、生成 source maps、运行测试等，从而减少开发者的工作量。
- 代码优化：构建工具可以对代码进行优化，例如压缩 JavaScript 和 CSS 以加快页面加载速度，消除不必要的代码等。
- 合并和分离文件：构建工具可以将多个文件合并为一个，从而减少 HTTP 请求数量，并将代码分离到不同的文件中，便于维护和管理。
- 方便的部署：构建工具可以生成生产环境可用的代码，并且提供方便的部署流程，使开发者可以轻松将代码部署到生产环境。
前端构建工具的意义：
2.2 Vite概要介绍
Vite是什么？ 定位：新一代前端构建工具
两大组成部分：
1． No—bundle 开发服务，源文件无需打包
2．生产环境基于Rollup的Bundler
核心特征：
1．高性能，dev启动速度和热更新速度非常快！
2．简单易用，开发者体验好
当下问题：
基于原生ESM的开发服务优势：
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
2.3 Vite上手实践
输入初始化参数：
启动后截图：
2.4 Vite整体架构
2.5 Vite进阶路线
三、课后个人总结：
初步掌握Vite的相关知识，并在课程大项目开发中进行应用，
四、引用参考：
- 课程课件
- juejin.cn/post/719895…
- ……
