Vite基础

• Vite是一种新型前端构建工具，能够显著提升前端开发体验。

• 它主要由两部分组成：
  （1）一个开发服务器，它基于原生ES模块提供了丰富的内建功能，如模块热更新；
  （2）一套构建指令，它使用rollup打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

• 在之前，浏览器中没有模块化的设计，我们需要把所有源代码编译到一个js文件中提供给浏览器使用，所以在开发中我们运行启动命令的时候，webpack需要从入口文件去索引整个项目的文件，编译成一个或多个单独的js文件。

• Vite所倡导的no-bundle理念的真正含义是利用浏览器原生ES模块的支持，实现开发阶段的Dev Server，进行模块代码的按需加载。浏览器请求对应的url的时候，提供对应的文件，一个import语句代表一个HTTP请求。

• 所谓的no-bundle只是对源代码而言，对于第三方依赖而言，Vite会进行依赖的预构建。

• Vite是基于浏览器原生ESM模块规范实现的Dev Server，不论是应用代码，还是第三方依赖的代码，理应符合ESM规范才能够正常运行。

• 但是目前还有相当多的第三方库仍然没有ES版本的产物，比如react（只有CommonJS格式）。

• 这种CommonJS格式的代码在Vite当中无法直接运行，我们需要将它转换成ESM格式的产物。

• 预构建主要做了两件事情：
  （1）把所有的CommonJS转换为ESM格式。
  （2）把dependency转换成单个模块，即打包第三方库的代码，将各个第三方库分散到文件合并到一起，减少HTTP请求数量。

• 而这两件事全部由性能优异的Esbuild（基于Golang开发）完成，这也是Vite项目启动飞快的一个核心原因。

Vite功能

• 热模块重载；
• TypeScript。

Vite的工作机制

• Vite实际上也是一个server，在启动Vite构建web server后，我们访问这个地址，该页面会向web server发送请求，请求对应的文件，我们可以从network中看到。
• 那些没有被引用到的文件就不会被编译，这就做到了按需编译。
• 当我们修改了页面的内容的时候，它只会重新编译其中发生了改变的文件，而其他文件通过缓存的方式，直接使用缓存资源，不需要进行额外的编译，这也是直接利用了浏览器的缓存机制。
• 除了利用浏览器缓存外，vite本身也有一个缓存的机制，它会针对依赖的包做一个缓存。
• vite通过使用websocket连接，当我们修改一个文件保存时，将这个修改的文件编译推送到浏览器，实现一个热更新。