这是我参与「第五届青训营 」笔记创作活动的第5天
首先我们来了解一下前端为什么要构建工具，“构建”也可理解为“编译”，这是将开发环境的代码转换为运行环境的代码的过程，开发环境的编码是为了更好地阅读，而运行环境的编码则是为了更快地执行。这两个目的不同，因此代码形式不同。
前端构建工具的意义是什么呢？可以模块化方案：提供模块加载方案，兼容不同模块规范；进行语法译：进行高级语法转译，如sass、typescript，也可以进行资源加载，如图片、字体、woker；产物质量：产物压缩、无用代码删除、语法降级；开发效率：是热更新，在 HMR 方面，当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
那么什么是vite呢。vite是下一代前端开发与构建工具。Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。有两大组成部分：No-bundle开发服务，源文件无需打包；生产环境基于Rollup的Bundler，其核心特征是高性能，dev启动速度和热更新速度非常快，而且简单易用，开发者体验好。Vite 提供了一套原生ESM的HMR API。 具有HMR功能的框架可以利用该API提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了HMR到Vue.js单文件组件（SFC）和React Fast Refresh 中。
Vite 是 vue 的作者在开发 vue3.0 的时候开发的一个 web 开发构建工具。由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。当然每个工具都有优势和缺点，我们要善于利用其优势。
