流程图：

这个流程图主要涵盖了Vite在开发环境中的核心工作流程，包括启动服务器、解析请求、模块转换、发送模块到浏览器、文件监听与热更新以及构建生产环境代码等步骤。当然，实际的Vite实现可能包含更多的细节和优化措施，但这个流程图提供了一个基本的框架来理解Vite的工作原理。

💡 vite为什么不在生产环境使用esbuild打包？

我的理解是开发环境esbuild不需要处理css等资源文件，而是统一交给浏览器，而在生产环境，打包时esbuild无法很好的处理资源文件，以及压缩等操作，所以使用生态强大的rollup

具体解释

1. 开发环境：
   • 在开发环境中，Vite 使用 esbuild 进行快速的模块转换，而不需要处理复杂的资源文件。
   • 浏览器直接请求 CSS 文件，Vite 不会对其进行打包和优化。
2. 生产环境：
   • 在生产环境中，Vite 使用 Rollup 来处理所有资源文件，将它们打包并进行各种优化。
   • Rollup 的插件系统能够处理复杂的需求，如提取 CSS、压缩代码、代码拆分等。

总结

• 开发环境：esbuild 速度快，配置简单，适合处理开发环境中的常见文件类型，提升开发体验。
• 生产环境：Rollup 提供了更丰富的插件生态系统和更强的优化能力，适合处理复杂的生产构建需求，包括资源文件处理和代码优化。

参考文献

https://zhuanlan.zhihu.com/p/424842555