本地环境下Vite+React网络请求过多？与CRA的差异及原理问询

这种情况完全正常，Vite在开发模式下的模块加载逻辑和CRA存在本质区别，才会出现浏览器网络面板请求数量较多的现象。

两者模块加载机制的核心差异 #

Create React App（CRA）的打包加载逻辑 #

CRA基于Webpack构建，开发阶段会执行全量预打包：

• 启动项目时，Webpack会从入口文件开始，递归解析所有依赖的模块，将它们合并打包成一个或少数几个bundle文件。
• 浏览器只需要请求这几个打包后的文件，就能加载运行整个应用，因此网络面板里的请求数量很少。
• 缺点是项目规模越大，预打包耗时越长，代码修改后的热更新速度也会随之变慢。

Vite的原生ES模块按需加载逻辑 #

Vite采用**浏览器原生支持的ES模块（ESM）**实现按需加载：

• 开发阶段不会提前打包所有模块，而是直接让浏览器通过<script type="module">加载入口文件。当浏览器解析到代码中的import语句时，会自动发起新的请求，加载对应的独立模块文件——这就是你看到上百个请求的原因。
• 优势是启动速度极快，无需等待全量打包；代码修改后，Vite只会更新变化的模块，热更新效率远高于Webpack。
• 生产环境下，Vite会将所有模块打包成少数几个优化后的bundle，和CRA的生产产物表现一致。

你提供的截图展示了Vite加载的部分模块请求，这正是上述加载机制的直观体现。现代浏览器对并行请求的处理能力很强，且Vite会对模块请求做缓存，后续刷新时大部分模块会从缓存读取，不会重复发起请求，不会影响开发体验。

内容的提问来源于stack exchange，提问作者me-me