为何Next.js会将JS Chunks打包进无需JavaScript的静态页面？

问题成因 #

从你提供的构建输出能看到，静态页面（404）和SSG页面（/posts/firstpost）加载了包含framework、main在内的共享JS Chunks，总大小近80kB。这是因为Next.js默认会加载这些全局依赖完成客户端hydration，即便页面完全不需要交互。

可行解决方案 #

1. 单页面禁用客户端运行时JS #

对不需要交互的页面，在getStaticProps中添加unstable_runtimeJS: false：

// pages/404.js 或 pages/posts/firstpost.js
export async function getStaticProps() {
  return {
    props: {},
    unstable_runtimeJS: false, // 关闭客户端JS
  };
}

⚠️ 注意：该选项为实验性特性，仅适用于完全无客户端交互的页面。

2. 精简_app.js的全局依赖 #

检查_app.js是否引入了仅部分页面需要的依赖（如全局状态库、交互组件）。对这类依赖，改用dynamic动态导入并设置ssr: false，或移至具体页面中，避免全局加载冗余代码。

3. 切换至静态导出模式 #

若站点全为静态内容，使用静态导出命令生成纯HTML/CSS文件：

next build && next export

此模式不支持SSR和API路由，但能彻底移除Next.js框架JS。

4. 清理页面中的客户端专属代码 #

确保静态页面组件中无window/document等客户端专属API引用，无需要在客户端运行的hooks。如有，需移除或用typeof window !== 'undefined'做条件包裹。

验证修改 #

重新执行next build，查看对应页面的First Load JS大小，冗余JS应大幅减少。

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