|
一、Vite简介
Vite作为新一代的前端构建工具，拥有以下几个特点：
开发时效率极高
开箱即用，功能完善
社区丰富，兼容rollup
开发时超高速的热重载，速度稳定
预设应用和类库打包模式，减少项目配置内容
与前端框架（Vue、React、Angular）无关
image.png
总结：就是一个字就是快，原先用webpack构建的项目可能需要1-2分钟的构建时间，而vite只需要2-3秒，开发时每次修改代码，页面基本都是实时更新。这和vite依赖于esbuild息息相关。
二、专题目标
掌握Vite的使用
1、 前端框架的集成
2、CSS、图片、Wasm等的第三方资源的加载
3、TS、JSX不同语法集成
4、glob import
5、 预编译文件
6、后端nodejs项目的集成
Vite插件开发和实战
1、rolluo、esbuiild的学习
2、Vite插件API详解
3、学习官方插件用例
Vite的源码解析，理解Vite的原理
1、为什么Vite的性能如此快
2、Vite的HMR如何实现
3、服务端渲染原理
三、对前端构建工具构建流程的认知
我们知道，随着前端应用越来越复杂，现在前端开发已经进入了前端框架时代（Vue、React、Angular），
现在的前端项目不仅仅只是几个页面几个JS那么简单的情况了，可能会有成百上千个js文件，那么构建工具是怎么把成百上千的js打包build成一个js文件的呢？所以构建是我们学习前端逃不开的话题，我们不仅仅要会使用一个构建工具，还要熟悉它的原理。
|