这是我参与「第四届青训营」笔记创作活动的第14天
前言
昨天讲了Webpack，这是一个构建工具。今天讲Vite，这同样也是一个构建工具。所以说我们都只是简单介绍，如果你想进一步地了解的话，可以参考它的官网。
Vite简介
它是一个新一代前端构建工具，主要由两大组成部分：No-Bundle开发服务，可以让源文件无需打包；还有基于Rollup的Bundler的生产环境。他的核心特征就是：高性能、简单易用。
当下的问题在于：很多市面上的成熟框架启动起来很慢，导致项目编译的等待成本很高；而且在热更新上时的效率也很慢，这就导致了修改代码后不能实时更新。这是为什么呢？因为bundle本身会带来性能开销，而且JS作为一门脚本语言，它的运行效率就摆在那里，所以说总是会有一个瓶颈的。
不过也有好的地方：目前的行业趋势是——全球浏览器对原生ESM的支持率能够达到90%以上，并且基于原生语言（比如Go、Rust）的工具链十分完善，就为我们开辟一个新赛道成为了可能。
Vite上手使用以及整体架构介绍
安装后、它具有很多的功能，比如说Scss & CSS Modules、使用静态资源、使用HMR，同样也支持其他框架的Tree Shaking。
那么他的整体结构主要由这几部分组成：依赖预打包，能够避免node_modules过多的文件请求，也能够将CommonJS格式转换为ESM格式；单文件编译，能够将编译速度提升10到100倍，不过缺点是不支持类型检查，也不能将语法降级到ES5；代码压缩，ESbuild作为默认压缩工具，替换了传统的Terser、Uglify等压缩工具；插件机制，在生产环境中可以直接使用Rollup。
Vite进阶路线
我们可以深入双引擎来了解其内部的工作环境，也可以了解Vite的插件开发，也可以深入了解一下代码分割（拆包）技术，更可以了解一下服务端渲染和底层标准，来让我们更好的理解框架的原理。
总结
目前市面上的框架有很多，我们只是做一个简单的介绍，具体是用什么还是要看开发环境以及你个人的需求和喜好捏。