Express+React下AdjectiveAnimalNumber格式用户名生成的高性能方案选型

我们当前给新用户自动分配Guest1、Guest99这类用户名，现在想改成${Adjective}${Animal}${Number}格式（比如AwesomePanther1）。采用Express后端+React前端架构，目前打算用以下代码读取存于.txt文件的动物词汇列表：

let fr = new FileReader();
fr.onload = function () {
    document.getElementById('output').textContent = fr.result;
}
fr.readAsText("/animalsWordList.txt");

animalsWordList.txt内容示例：

dog
cat
fish

形容词列表也计划用同样的TXT读取方式，最终拼接三部分生成用户名。现在疑问：当列表规模较大时（约700个动物词汇、1000-2000个形容词），这种TXT读取方式是不是最优性能方案？改成把数据存入导出JSON数组的.js文件并通过import导入会不会更高效？

注：无需考虑用户名唯一性，已验证JS数组导入方式可行，核心关注性能差异。

将词汇列表做成导出JSON数组的JS文件并通过import导入的性能远优于前端读取TXT文件的方式，核心原因如下：

• 加载效率：
  React项目构建时，import的JS/JSON文件会被打包进静态资源，属于页面初始化阶段的同步加载（也可按需懒加载），无需额外发起HTTP请求获取TXT文件。而前端用FileReader读取TXT本质是发起一次额外网络请求，即便文件被缓存，仍存在请求解析的开销，大列表场景下，网络延迟会直接拖慢用户名生成的响应速度。

• 解析成本：
  读取TXT后需要手动按换行分割字符串转成数组，这属于额外的运行时计算。而import的JSON数组是JS可直接使用的结构，无需任何解析转换步骤，拿到就能随机取值拼接。

• 缓存与复用：
  打包后的JS文件会被浏览器高效缓存，后续访问无需重新加载。TXT文件虽也能配置缓存，但JS模块的缓存机制更贴合前端项目的资源管理流程，能减少不必要的资源重复获取。

如果后端也需要用到这些词汇列表，更建议在后端将TXT转成JSON/JS模块，前端要么直接调用后端接口获取生成好的用户名，要么共享同一模块文件，这样前后端都能高效复用数据，避免前端重复处理。

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