为何会有Vite这样的构建工具出现
说到构建工具，更应该先提及当下最普及的Webpack和rollup之类的，不过它们都有相同的基本功能，解决最基本的现代前端开发问题：在ECMA迭代下如何保证兼容各浏览器、如何兼容ESM CommonJS UMD三种模块化方案、如何减少对人工去重的依赖、如何提升前端的开发体验。
最近在做的低代码平台，其中的模块就是用的UMD方案，用vite build可以生成。里面的代码是压缩成了纯js、html和css。还调下配置把.css一同压缩进去（如果你一搜还能直接搜到你写的css样式，用个<style>标签包裹着），在别处直接按路径resolve就可以load进来，模块还可以给别人用。
为什么我需要Vite
Webpack和Vite都用过，但论开发体验，无疑后者领先。原因在于Vite npm run dev后进行类似懒加载的处理模式，只有访问到时才去编译，不像Webpack已保存全都给你编译了。还有就是对各种文件的支持，Vite里各种配置也很全，从Webpack过渡到Vite几乎没有啥障碍。
还有就算是编译，依旧比Webpack快，见下图
Vite采用的是Esbuild编译，源文件不打包，生产环境基于Rollup的Bundler。
生态
Vite虽然好像也没出来多久，Vite3.0也是前不久才出来的，有一些小小的毛疵，比如resolve一些文件的时候可能不太顺利，能在Vite的Issue下找到替代方案（其实我一开始想换回2.9了，现在是3.0.4）。但生态其实很不错，具体来说就是插件，用几个插件，改变了我的开发方式，提高了开发效率。偶尔会有一些小bug，那就用回原生的功能。这里有几个用到的插件，稍微推荐下：
- vite-plugin-pages
优化了路由，还记得vue-router又是配路径又是路由组件的吗，现在这个插件让路由配置变得几乎没有印象——配置好插件配置之后，不用再给路由定义什么path name children了，直接就按文件夹的名字来。当然了，要搞前置路由、路由守卫之类就可能就稍微不方便点
- vite-plugin-mock
mock数据，测试用
- vite-tsconfig-paths
方便地让你import from '@/**'，当然resolve.alias也不是不可以。
总结
本次课程我了解了vite的相关概念及应用场景，初步构建起了vite的知识体系，颇有收获。
