React CRA+TS单页应用静态数据模块存储的内存性能疑问

结论：完全不会有内存或性能问题，这种方案非常适合你的场景 #

为什么没问题？

• 数据量极小：30-50条数据，每条都是字符串类型，就算description满1000字符，总数据量也仅几十KB级别。现代浏览器内存动辄GB级，这点数据占用可以忽略不计；加载和解析时的性能开销也微乎其微，不会影响应用启动速度。
• 模块导出的天然优势：
  • TypeScript能提供完整的类型校验，避免因数据结构错误导致的bug，这是JSON文件不具备的（除非额外写类型定义）。
  • 导入后直接使用，无需额外的JSON.parse步骤，代码更简洁，运行时也少了一次解析操作。
  • CRA内置的Webpack会对模块内的数组进行压缩优化，最终打包体积和JSON方案几乎无差异。

关于浅拷贝的注意事项

你提到在高层组件中做浅拷贝，这完全没问题：

• 因为数据是不可变静态数据，浅拷贝不会导致引用修改的风险，反而能避免意外修改原模块的数组（虽然静态数据应该不会被修改，但防御性编程是好习惯）。
• 浅拷贝的成本极低，几十条数据的拷贝操作耗时可以忽略，不会引发性能问题。

后续扩展建议

如果未来数据量真的增长到几百条以上，可以做以下优化（当前30-50条完全没必要）：

• 按类别拆分模块：比如把不同类型的数据拆分成多个文件，按需导入，减少初始加载的体积。
• 预构建查找映射：在应用初始化时把数组转换成Map或对象（比如const dataById = new Map(data.map(item => [item.id, item]))），这样根据id查找数据时可以做到O(1)时间复杂度，比遍历数组更快。

和JSON方案的对比

你提到知道JSON替代方案，但倾向用模块导出，这个选择很合理：

• JSON方案需要通过fetch或静态导入加载，fetch还需要处理异步逻辑，模块导出是同步的，代码更简洁。
• JSON文件无法直接享受TypeScript的类型校验，需要额外编写类型定义文件，而模块内的数组可以直接用SampleObject类型约束。
• 只有当数据需要和非前端工具共享（比如后端脚本、其他应用）时，JSON的通用性优势才会体现，你的场景下模块导出更适配React+TS的开发流程。

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