如何将大型硬编码数组从Next.js主包中移除？

• 动态导入拆分独立chunk
  把大数组单独存成一个模块文件，比如largeArray.js，之后在需要使用的地方用ES原生动态import加载，Next.js会自动把这个模块打包成独立的chunk，不会塞进主包。
  示例代码：

  // largeArray.js
  export const largeArray = [/* 你的大数组内容 */];
  
  // 使用数组的组件内
  async function getLargeArray() {
    const { largeArray } = await import('../path/to/largeArray');
    return largeArray;
  }
  
  // 客户端组件里用useEffect触发加载
  useEffect(() => {
    getLargeArray().then(arr => {
      // 这里处理数组逻辑
    });
  }, []);
  

  如果是服务端组件，直接await import即可，不需要useEffect。

• 存为JSON文件，通过fetch加载
  把数组导出成JSON文件放到项目的public文件夹，比如public/largeArray.json，之后在客户端通过fetch请求获取，完全不参与前端代码打包。
  示例代码：

  // 客户端组件内
  useEffect(() => {
    async function fetchArray() {
      const res = await fetch('/largeArray.json');
      const largeArray = await res.json();
      // 处理数组逻辑
    }
    fetchArray();
  }, []);
  

• 服务端读取（适配SSR/SSG场景）
  如果数组仅在服务端使用，或者需要在服务端处理后再传给客户端，可以直接在服务端读取本地文件或从数据库获取，完全不把数组打包到前端代码里。
  示例代码（服务端组件）：

  import fs from 'fs/promises';
  import path from 'path';
  
  async function getLargeArray() {
    const filePath = path.join(process.cwd(), 'data/largeArray.json');
    const jsonData = await fs.readFile(filePath, 'utf8');
    return JSON.parse(jsonData);
  }
  
  export default async function MyComponent() {
    const largeArray = await getLargeArray();
    // 组件渲染逻辑
    return <div>{/* 使用数组内容 */}</div>;
  }
  

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