vite的依赖预构建

原生ES导入例如：

import _ from 'lodash'

//浏览器会抛出错误：
//Uncaught TypeError: Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".

在开发环境中，首次启动vite开发服务器时，vite发现我们项目引入第三方库的依赖，路径为非绝对路径的导入或者非相对路径的导入会进行尝试路径补全，例如：

import _ from 'lodash'
console.log(_);

以上代码vite会处理成这样

import __vite__cjsImport0_lodash from "/node_modules/.vite/deps/lodash.js?v=f7611a74";
const _ = __vite__cjsImport0_lodash.__esModule ? __vite__cjsImport0_lodash.default : __vite__cjsImport0_lodash
console.log(_);

Vite 的依赖预构建过程是通过 esbuild 快速将从 node_modules引入的依赖转换为 ESM（ECMAScript Module）格式。它的开发服务器利用 HTTP 头部进行依赖缓存，减少重复请求，提高加载速度。强缓存提升了开发效率，使浏览器能缓存不常变化的依赖，避免每次都从服务器请求。由于项目中的第三方库可能包含数百个依赖，为了防止因大量请求导致网络拥塞，Vite 会将经过转换的某些依赖打包成一个文件，这能有效减少浏览器端的并发请求数量，从而改善页面加载性能。例如：

import lodashEs from 'lodash-es'

项目中引入了lodash-es，我们从浏览器的网络请求中找到请求的lodash-es文件：

这里lodash-es只请求了一次，但实际上源码引入了很多东西如下：

这是因为vite将这些引入模块统一集成到一个文件中了。

接下来使用optimizeDeps.exclude 这个配置再看一下浏览器的网络请求：这个配置是在预构建中强制排除的依赖项。

这么多的网络请求请求很影响浏览器性能！

总结：

vite在依赖预构建过程中解决了三个问题：

1. 不同的第三方库会有不同的导出方式，这是vite无法约束的，vite会使用esbuild将其转换为统一的ESM（ECMAScript Module）格式。
2. 使用esbuild将第三方库引用的所有依赖打包到一个文件中，解决网络多包传输的性能问题。
3. 将所有esbuild转换过的文件放到 /node_modules/.vite/deps/ 下，方便路径重写。