vite依赖预构建

前言

当你首次启动 vite 时，Vite 在本地加载你的站点之前预构建了项目依赖。默认情况下，它是自动且透明地完成的。

import _ from 'loadsh'

export const count = 999

为什么能找到loadsh？vite在处理过程中，如果看到了非绝对或者相对路径，他会尝试开启自动补全。找寻依赖的过程是自当前目录依次向上查找的过程，直到搜宣到根目录或者找到为止。

开发与生产环境

依赖预构建仅适用于开发模式，并使用 esbuild 将依赖项转换为 ES 模块(因为并不知道第三方库的作者使用的是esmodule还是commonjs)，相当于重新打包一遍。在生产构建中，将使用 @rollup/plugin-commonjs。而在生产环境vite会全权交个rollup的库来完成生产环境的打包（这个功能更强大，支持commonjs）

原因

CommonJS 和 UMD 兼容性: 在开发阶段中，Vite 的开发服务器将所有代码视为原生 ES 模块。因此，Vite 必须先将以 CommonJS 或 UMD 形式提供的依赖项转换为 ES 模块。

在转换 CommonJS 依赖项时，Vite 会进行智能导入分析，这样即使模块的导出是动态分配的（例如 React），具名导入（named imports）也能正常工作：

性能： 为了提高后续页面的加载性能，Vite将那些具有许多内部模块的 ESM 依赖项转换为单个模块。

有些包将它们的 ES 模块构建为许多单独的文件，彼此导入。例如，lodash-es 有超过 600 个内置模块！当我们执行 import { debounce } from 'lodash-es' 时，浏览器同时发出 600 多个 HTTP 请求！即使服务器能够轻松处理它们，但大量请求会导致浏览器端的网络拥塞，使页面加载变得明显缓慢。

通过将 lodash-es 预构建成单个模块，现在我们只需要一个HTTP请求！

解决了3个问题