👁 31 次阅读

Vite 应用开发中遇到的性能问题是什么？

现象描述

随着代码库规模不断扩大，开发团队在使用 Vite 进行开发时遇到了慢速页面重载的问题。这一问题并不奇怪，因为模块大小已经显著增长。然而，这成为了一个真正的痛点。相似的问题也已经在社区讨论中得到了反映。

背景原因

主要问题在于如何导入共享代码。团队常常使用共享代码的索引文件导入，因为这在开发中非常方便，例如：

// /shared/index.ts
export { a } from './a'
export { b } from './b'
export { c } from './c'

// Component.vue
import { a, b } from '/shared'

虽然此方法有利于代码组织，但它会导致不必要的模块加载。因此，即使当前组件不使用某些模块（如c），Vite 仍会加载整个模块以及其依赖。

排查或量化方法

github issue 涉及的讨论显示，部分情况下利用单个索引文件进行目录导入会大大增加 Vite 在开发服务器上的加载时间。在涉及到大量性能相关性问题时，社区反馈越清晰，越能帮助定位问题。
标签 enhancement 和 performance 确认了这一问题的性质，而 p4-important 标记反映了问题对于开发体验的重要性。

当前处理路径与局限

社区提出的解决方案包括摒弃索引文件导入，改为直接导入每一个模块。尽管理论上看似合理，但实际应用中，团队面临着显著的复杂度挑战，尤其是在庞大的 monorepo 中。
另一个讨论方向是对 Vite 的模块加载策略进行优化，例如引入 Treeshaking，以便在开发模式下实现更精细的模块传递。

解决方案	优点	缺点
每个模块独立导入	可以减少未使用模块的加载	导入路径复杂化，开发效率下降
更新 Vite 的加载策略	可能大幅提升开发服务器性能	依赖于 Vite 策略的改进，依然在社区考验中
使用外部工具进行Treeshaking	在现有策略之外提供替代优化方式	需要额外配置，对现有代码库的改造量较大

常见错误排查

1. 未使用的模块仍被加载: 因为共享代码的索引文件被导入，其所有成员均被加载。 2. HMR（热模块替换）可靠性问题: 在大型代码库中，HMR 可能会引发问题，导致变更未能正确生效。 3. 索引文件导入与性能问题关联: 社区发现使用索引文件导入在开发阶段明显拖慢加载速度。

常见误解与错误通道

假设手动分解导入路径会自动提升性能: 实际上，更改接口导入路径的改动可能需要大量工作量且不一定有效。
认为极端拆分导入路径是唯一解决方案: 其他解决方案如社区工具或 Vite 内部优化尚未被充分探索。

实践建议

如无直接解决方案，可以尝试减少单个模块的大小，以降低整体模块加载时间。
在代码架构上合适的地方使用索引文件导入，但避免全局开启此模式。

常见问题

问：Vite 性能问题如何解决与减缓？ 答：短期内，尽量减少使用共享索引文件导入；中期可关注 Vite 的相关更新，长期推动社区讨论，寻找更优化的方案。 问：使用的 Vite 版本是否会影响检索速度？ 答：不同版本有不同的性能表现，但 Vite 本身并未在此方面做出显著的优化，因此也对此需保持关注。 问：是否有工具支持导入路径优化？ 答：目前社区尚未公布单独的工具，用户可以参考现有的 treeshaking 实现进行二次开发。总体而言，该问题是一个目前还在开发阶段的方案，社区仍在探索中。在此期间，开发者们可根据实际代码规模和讨论进展自行调整开发实践。