Next.js大Bundle优化咨询：构建时预生成静态数据结构

针对你遇到的运行时动态生成数据导致页面变慢的问题，这里有几个实用的方案，不需要拆分项目也能实现开发/生产环境的适配：

方案1：预构建静态文件（最直接） #

写一个Node.js脚本，在Next.js构建前先生成静态的mySpecialTable.generated.js，然后在代码里直接导入这个生成好的文件。

步骤： #

1. 新建scripts/generate-table.js：

const fs = require('fs');
const path = require('path');

// 生成复杂数据结构（和你原来的逻辑一致）
const table = [];
for (let i=1; i<=10; i++) {
  table.push(i);
}

// 写入静态文件
const content = `export const numberTable = ${JSON.stringify(table)};`;
fs.writeFileSync(
  path.join(__dirname, '../mySpecialTable.generated.js'),
  content
);

2. 在package.json里修改构建命令，先执行脚本再构建：

{
  "scripts": {
    "prebuild": "node scripts/generate-table.js",
    "build": "next build",
    "dev": "node scripts/generate-table.js && next dev"
  }
}

3. 修改myImportModule.js导入生成的文件：

import { numberTable } from './mySpecialTable.generated.js';

export const table = numberTable;

开发环境下每次启动前会重新生成，生产环境构建前生成一次，完全消除运行时循环。

方案2：利用Next.js App Router的静态生成能力 #

如果你的页面是静态渲染（SSG），可以直接在页面组件里用顶层await或者在generateStaticParams里预生成数据，不过更适合的是把数据作为静态常量嵌入：

页面端（page.js）： #

import Box from '@mui/material/Box';

// 顶层await在Next.js App Router中支持构建时执行
const table = await (async () => {
  // 这里写你的复杂生成逻辑，构建时会执行并把结果嵌入bundle
  const temp = [];
  for (let i=1; i<=10; i++) {
    temp.push(i);
  }
  return temp;
})();

export default function Page() {
  return (
    <>
      {table.map((e,i) => <Box key={i}>{e}</Box>)}
    </>
  );
}

API路由（route.js）同理，用顶层await生成静态数据：

// 构建时执行，生成静态table
const table = await (async () => {
  const temp = [];
  for (let i=1; i<=10; i++) {
    temp.push(i);
  }
  return temp;
})();

export function GET({params}) {
  const ret = table[params.slug];
  return Response.json({ok:true,data:ret});
}

Next.js在构建阶段会执行顶层await的代码，把结果直接打包进bundle，运行时不需要再执行循环。

方案3：自定义Webpack Loader（进阶） #

写一个简单的webpack loader，在构建时把mySpecialTable.js里的动态生成逻辑替换成静态值。

步骤： #

1. 新建loaders/static-table-loader.js：

module.exports = function(source) {
  // 替换原来的动态生成代码为静态数组
  const table = [];
  for (let i=1; i<=10; i++) {
    table.push(i);
  }
  return `export const numberTable = ${JSON.stringify(table)};`;
};

2. 修改next.config.js配置loader：

const path = require('path');

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /mySpecialTable\.js$/,
      use: path.resolve('./loaders/static-table-loader.js'),
    });
    return config;
  },
};

这样webpack在处理mySpecialTable.js时，会直接用loader生成的静态代码替换原文件，不管开发还是生产环境都能直接用静态数据。

方案对比 #

• 方案1：最通用，适合任何场景，缺点是需要额外维护脚本
• 方案2：Next.js原生支持，无额外脚本，适合App Router项目
• 方案3：侵入性低，原文件不用修改，适合需要保留原代码结构的情况

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