深入了解Vite：依赖预构建原理

主要观点总结

本文主要介绍了Vite开发阶段的no-bundle理念，以及Vite如何处理第三方依赖的预构建。文章详细解释了预构建的原因、过程以及Vite的配置选项。

关键观点总结

关键观点1: Vite的no-bundle理念及预构建概念

Vite在开发阶段采用no-bundle理念，将项目中的模块分为依赖和源码两部分。依赖部分使用预构建方式处理，以提高页面加载性能。预构建是基于Esbuild完成的，不会造成明显的打包性能问题。

关键观点2: 预构建的原因

预构建的主要原因包括：确保commonJS和UMD兼容性，因为不是所有第三方依赖都有ESM版本；提高页面加载性能，通过将具有多个内部模块的ESM依赖项转换为单个模块。

关键观点3: Vite预构建的过程和配置

Vite在启动服务时执行initDepsOptimizer进行依赖优化。通过loadCachedDepOptimizationmetadata获取本地缓存的metadata数据，如果没有缓存则进行依赖扫描，使用esbuild对扫描出的依赖项进行预编译。Vite提供了优化相关的配置选项，如exclude、include等。

关键观点4: 推荐阅读

文章最后推荐了几篇相关文章，包括Vite的发展、Next.js对Vite的选择、前端代码规范等。