加载首页时Next.js发送全量页面JS，如何配置仅加载对应页面JS？

1. 排查全局强制导入代码 #

• 检查_app.js、_document.js或全局配置文件，是否存在import '../pages/**/*.js'这类批量导入所有页面的代码，这类代码会把所有页面打包进初始chunk，直接删除即可。
• 检查导航组件，若直接导入了所有页面组件（比如import About from '../pages/about'），改成使用next/link组件配合路径的方式，避免提前加载非首页组件：

  import Link from 'next/link'
  
  <Link href="/about">
    <a>关于我们</a>
  </Link>
  

2. 利用动态导入拆分代码 #

Next.js默认支持自动代码分割，若有特殊场景，可使用next/dynamic手动动态导入组件，避免初始加载不必要的代码：

import dynamic from 'next/dynamic'

// 该组件不会被打包进首页初始chunk，仅在使用时加载
const HeavyBusinessComponent = dynamic(() => import('../components/HeavyBusinessComponent'), {
  ssr: false, // 无需服务端渲染时可关闭
  loading: () => <p>加载中...</p>
})

3. 检查next.config.js配置 #

确保没有修改默认的代码分割逻辑，自定义webpack配置时不要禁用splitChunks：

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    // 自定义配置时保留默认的代码分割规则
    return config
  }
}

4. 验证生产构建效果 #

• 执行npm run build完成生产构建，查看.next/static/chunks目录，每个页面应对应独立的chunk文件（如pages/about.js对应about-[hash].js）。
• 启动生产服务npm run start，打开浏览器开发者工具的Network标签，刷新首页，仅会加载首页对应的chunk文件，其他页面chunk仅在跳转时才会下载。

5. 核对Docker与Nginx配置 #

• Docker构建阶段必须使用生产构建命令：RUN npm run build，禁止用开发模式构建。
• Nginx配置需正确代理静态资源，避免错误加载所有chunk文件，示例配置：

  server {
    listen 80;
    server_name validaet.com;
  
    location / {
      proxy_pass http://nextjs:3000;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  
    location /_next/static/ {
      alias /app/.next/static/;
      expires 365d;
      access_log off;
    }
  }
  

6. 排查SSR/SSG相关代码 #

若使用getServerSideProps或getStaticProps，确保函数内没有导入非首页的组件或大体积依赖，避免这些内容被打包进首页chunk。

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