前言
当你首次启动 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请求!