一、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文件的呢?所以构建是我们学习前端逃不开的话题,我们不仅仅要会使用一个构建工具,还要熟悉它的原理。
网友评论