Vite 的预构建原理与实践| 京东物流技术团队
内容提要
Vite 的预构建主要解决兼容性和性能问题，通过将 CommonJS 依赖转换为 ESM 格式，减少网络请求，提高加载速度。它自动扫描项目依赖，使用 esbuild 快速处理，并在首次启动时检查缓存以优化开发效率。Vite 通过 Koa 服务器处理请求，支持按需加载和模块重写，能够解析 Vue 文件。
延伸解读
预构建如何提升开发效率
Vite 的预构建通过将 CommonJS 或 UMD 依赖转换为 ESM 格式，解决了浏览器原生 ESM 的兼容性问题。同时，它将多个内部模块的 ESM 依赖合并为单个模块，显著减少了网络请求数量，从而加快页面加载速度。这种按需加载机制避免了全量打包，使开发服务器启动和热更新更加迅速。
缓存机制与依赖更新
Vite 将预构建的依赖缓存在 node_modules/.vite 目录下，并通过 _metadata.json 文件记录哈希值。当 package.json、lockfile 或 vite.config.js 中的配置发生变化时，哈希值不一致会触发重新构建。这种策略避免了重复构建，但开发者需注意依赖变更后缓存可能失效，需确保配置正确以利用缓存优势。
模拟实践中的关键步骤
文章通过模拟实践展示了 Vite 的核心处理流程：首先，Koa 服务器拦截请求，将裸模块路径重写为相对地址，使浏览器能够加载；其次，对 .vue 文件进行解析，将模板编译为渲染函数，脚本部分转换为 ESM 格式。这一过程体现了 Vite 如何在不打包的情况下实现模块的按需加载和转换。
Q&A
Vite 的预构建主要解决了哪些问题？
Vite 的预构建主要解决了兼容性和性能问题，特别是将 CommonJS 依赖转换为 ESM 格式以提高加载速度。
Vite 如何处理项目中的依赖项？
Vite 自动扫描项目源码寻找依赖项，并使用 esbuild 快速处理这些依赖。
Vite 的预构建过程是如何触发的？
预构建过程通过 Vite 的 optimizeDeps 函数触发，该函数检查是否存在 _metadata.json 文件以决定是否需要重新构建。
Vite 的缓存策略是怎样的？
Vite 的预构建依赖会缓存在 node_modules/.vite 目录下，缓存策略根据配置文件决定是否需要重新构建。
Vite 如何处理 Vue 文件？
Vite 能够解析 Vue 文件，并将其转换为浏览器可识别的 JavaScript 文件。
Vite 的预构建如何提高开发效率？
Vite 通过检查缓存和快速处理依赖，减少了重复构建的开销，从而提高了开发效率。
