NextJS从public目录导入globe.json失败的原因及性能影响咨询

1. 为什么public文件夹的JSON导入失败？ #

像React、Next.js这类用Webpack打包的项目里，import语句是用来加载源码模块的，打包工具只会扫描src/这类源码目录，以及你配置的别名路径（比如你用的@/就指向src/），而public/是专门放静态资源的目录，不在模块扫描范围内。

你写import countries from '/globe.json'时，打包工具会从项目根路径找这个文件，但不会去public/里搜，所以才会提示找不到模块。

如果要用上public里的JSON，别用import，改成静态资源请求就行：

// 在组件里异步获取
async function getCountries() {
  const response = await fetch('/globe.json');
  const countries = await response.json();
  return countries;
}

2. JSON文件放不同目录的性能影响 #

放在src/目录下（比如你成功导入的src/lib/test.json） #

• 好处：
  • 会被打包工具处理，能做树摇优化（如果只用到JSON里的部分内容，没用的会被删掉）
  • 直接嵌进JS打包文件里，不用额外发请求，获取速度快
• 坏处：
  • 要是JSON体积大，会把JS打包文件撑得很大，拖慢首屏加载速度

放在public/目录下 #

• 好处：
  • 不会被放进JS打包文件，能保持打包文件体积小，首屏加载更快
  • 静态资源可以用CDN缓存，用户后续访问速度会更快
• 坏处：
  • 得额外发一次HTTP请求去拿JSON，首次加载时多了一层网络开销
  • 没法被打包工具优化，比如JSON里有冗余内容的话，没法自动精简

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