如何减小Next.js静态HTML导出页面的磁盘占用大小？

下面是几个实用的优化方向，能有效降低静态HTML文件的磁盘占用：

• 启用深度HTML压缩
  Next.js内置了HTML压缩配置，在next.config.js里开启更严格的压缩规则：

  module.exports = {
    // 你的其他配置
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeRedundantAttributes: true,
      removeEmptyAttributes: true,
      minifyJS: true,
      minifyCSS: true,
      minifyURLs: true,
      keepClosingSlash: true,
    },
  };
  

  这个配置会自动清理注释、空白字符，压缩内联的JS/CSS，移除冗余属性，能显著减小文件体积。

• 禁用不必要的客户端运行时
  如果你的静态页面只是纯展示、不需要客户端交互，可以关闭Next.js的客户端hydration逻辑，避免注入额外的运行时JS：
  在页面组件顶部添加：

  export const config = {
    unstable_runtimeJS: false,
  };
  

  这一步通常能砍掉几十KB的内联JS，效果非常明显。

• 清理未使用的代码与依赖

  • 确保项目开启Tree Shaking（Next.js默认支持ES模块的Tree Shaking），避免打包未使用的组件或第三方库代码。
  • 用next/dynamic动态导入非必要的组件，并设置ssr: false，只在客户端按需加载，减少静态HTML里的内联代码。
  • 替换体积过大的第三方库，比如用轻量级的替代方案（比如用date-fns代替moment.js）。

• 优化内联资源

  • 检查HTML里的内联CSS/JS，是否有重复或冗余代码，通过CSS模块化、代码拆分来减少重复。
  • 避免将大体积的资源（比如大图片）转成base64内联到HTML中，改用外部引用并优化图片格式（WebP、AVIF）。

• 移除冗余的Meta标签与脚本
  检查生成的HTML，移除开发环境的调试脚本、未使用的第三方统计/分析脚本，或者通过环境变量控制只在生产环境加载必要的脚本。

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