Vite从入门到精通（一）开篇介绍

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