Next.js 14构建后如何修改Chunk文件名以避免缓存问题？

云原生阿岚

2026-6-17

问题

我需要每次构建后生成的Chunk文件都有唯一的文件名，示例如下：

<link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-653a0787c4442713.js"/>
<script src="/_next/static/chunks/fd9d1056-1a173cac11a1f73c.js" async=""></script>
<script src="/_next/static/chunks/23-5b35c9eea0c04c88.js" async=""></script>
<script src="/_next/static/chunks/main-app-f12028dd9bfdf9fd.js" async=""></script>
<script src="/_next/static/chunks/223-58572653937c7966.js" async=""></script>

目前的问题是，名为main-app-{哈希值}.js的文件会被服务器端缓存，每次构建后前端渲染都会因为缓存的旧文件出现异常。

解决方案

1. 确认Next.js的内容哈希配置

Next.js默认会根据文件内容生成唯一哈希，但如果有自定义配置，需在next.config.js中确保以下设置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 可选：自定义构建ID，确保每次构建唯一
  generateBuildId: async () => {
    return new Date().getTime().toString();
  },
  // 确保webpack输出的chunk包含内容哈希
  webpack: (config, { isServer }) => {
    config.output.chunkFilename = isServer 
      ? '[name].js' 
      : '[name].[contenthash].js';
    return config;
  },
};

module.exports = nextConfig;

这样main-app相关的chunk会根据文件内容生成唯一哈希，确保代码变更后文件名自动更新。

2. 修正服务器缓存策略

针对main-app-*.js这类静态chunk，调整服务器缓存规则：

设置Cache-Control头为public, max-age=31536000, immutable——这个策略仅适用于文件名带内容哈希的文件，因为哈希变化意味着文件内容更新，浏览器会自动请求新文件。
确保服务器端渲染的HTML文件不被长期缓存（设置Cache-Control: no-cache或较短的max-age），避免HTML引用旧的chunk路径。