Vite依赖预构建

一、什么是依赖预构建

• 默认情况下，vite会将package.json中生产依赖（dependencies）进行预构建，将构建的内容缓存在node_modules的.vite文件中。启用DevServer的时候直接请求缓存的内容。

• 在vite.config.js中的optimizeDeps选项可以选择需要或不需要进行预构建的依赖的名称，Vite 则会根据该选项来确定是否对该依赖进行预构建。

• 在启动时添加 --force options，可以用来强制重新进行依赖预构建。

  需要注意，强制重新依赖预构建指的是忽略之前已构建的文件，直接重新构建。

二、为什么要预构建

Vite是基于浏览器原生ES模块实现的 dev serve，不管是应用的源码还是依赖的代码都需要符合ESM 规范才能运行。

1、应用的源代码我们是可以自己控制，但是依赖的打包后的代码我们无法控制，目前还有不少的依赖的打包规范不符合ESM规范（例如React），Vite无法直接使用。

2、较多请求，页面加载缓慢

• Vite中每个import都会触发一个请求，在依赖层级很深，涉及模块较多的情况下会出现超级多的请求。
• 在谷歌浏览器中同一个域名下只能同时支持6个http请求。

以上两个原因会导致页面加载比较缓慢，与Vite主导的性能优势相违背。

三、预构建做的事情

• 是将其他格式(如 UMD 和 CommonJS)的产物转换为 ESM 格式，使其在浏览器通过 <script type="module"><script>的方式正常加载。
• 是打包第三方库的代码，将各个第三方库分散的文件合并到一起，减少 HTTP 请求数量，避免页面加载性能劣化。

这两件事情全部由性能优异的 Esbuild 完成，所以也不会有明显的打包性能问题，反而是 Vite 项目启动飞快(秒级启动)的一个核心原因。

对于依赖的请求结果，Vite的dev serve会做强缓存处理

四、预构建配置

• 入口文件entries

在项目启动的时候，Vite会默认抓取项目中的所有html文件，以html文件作为入口，根据入口文件扫描项目中的依赖进行预构建。

当默认的html文件做为入口不满足我们的需求的时候，我们可以通过entries来配置入口文件

• 添加依赖-include

由于Vite按需加载的特性，有些import只有在运行时才能确定，Vite发现了新的依赖，会重新进行预构建，并重新刷新页面，这个过程也叫二次预构建，为了避免这种重复刷新页面的情况，我们可以使用include提前将依赖进行预构建

• 排除预构建-exclude 将某些依赖从预构建的过程中排除