使用getStaticProps时Next.js首次加载获取所有JSON文件的性能疑问

核心问题原因 #

getStaticProps 本身是在构建阶段为每个静态生成页面单独预获取数据的，正常情况下不会出现首次进入页面就加载所有JSON的情况。出现这个问题大概率是你在代码里全局批量引入了所有JSON文件（比如在公共组件、_app.js这类全局文件中），或者webpack打包时把所有JSON合并进了主chunk，导致首次加载时被一次性拉取。

针对性解决方案 #

1. 每个页面的getStaticProps仅请求自身所需JSON #

确保每个页面的getStaticProps只加载当前页面对应的JSON，不要在全局或公共模块中批量加载：

// pages/your-page/[slug].js
export async function getStaticProps({ params }) {
  // 根据页面参数加载对应JSON文件
  const res = await fetch(`/data/${params.slug}.json`);
  const pageData = await res.json();

  return {
    props: { pageData }
  };
}

2. 拆分JSON文件的打包chunk #

如果是webpack打包导致JSON被合并进主chunk，可以通过两种方式优化：

• 页面内动态导入JSON（适合客户端按需加载场景）：

// 页面组件内部按需加载
const loadPageData = async (slug) => {
  const pageData = await import(`../data/${slug}.json`);
  return pageData.default;
};

• 配置next.config.js调整JSON打包规则：

// next.config.js
module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.json$/,
      type: 'json/module',
      exclude: /node_modules/,
    });
    return config;
  },
};

3. 排查全局导入代码 #

检查_app.js、_document.js或公共layout组件中是否存在批量导入所有JSON的代码，比如：

// 错误示例：全局批量导入所有JSON
import allData from '../data/*.json';

如果有这类代码，直接删除，改为每个页面单独加载对应JSON文件。

验证方法 #

修改后重新构建项目，打开浏览器开发者工具的网络面板，首次进入页面时查看请求列表，确认仅加载当前页面所需的JSON文件即可。

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