这是我参与「第五届青训营」伴学笔记创作活动的第14天
为何会有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几乎没有啥障碍。
前端构建工具的意义
1.模块化方案
1.提供模块加载方案
2.兼容不同模块规范
复制代码
2.语法转译
1.高级语法转译，如Sass、TypeScript
2.资源加载，如图片、字体、worker
复制代码
3.产物质量
产物压缩、无用代码删除、语法降级
复制代码
4.开发效率
热更新
Vite概括
定位：新一代前端构建工具
两大组成部分：
1.No-bundle开发服务，源文件无需打包
2.生产环境基于Rollup的Bundle
核心特征：
1.高性能，dev启动速度和热更新速度非常快
2.简单易用，开发者体验好
