如何构建产物包文件名可读的Next.js项目？

注意：以下修改产物命名规则的配置仅建议用于本地性能调试场景，关闭哈希会导致浏览器静态资源缓存失效，禁止用于线上生产环境部署

方法1：修改webpack配置关闭产物哈希 #

在项目根目录的next.config.js文件中添加如下配置：

module.exports = {
  webpack: (config, { isServer }) => {
    // 仅针对客户端生产构建修改命名规则
    if (!isServer && process.env.NODE_ENV === 'production') {
      // 修改JS产物命名规则，去掉哈希
      config.output.filename = 'static/chunks/[name].js'
      config.output.chunkFilename = 'static/chunks/[name].chunk.js'

      // 修改CSS产物命名规则，去掉哈希
      config.plugins.forEach(plugin => {
        if (plugin.constructor.name === 'MiniCssExtractPlugin') {
          plugin.options.filename = 'static/css/[name].css'
          plugin.options.chunkFilename = 'static/css/[name].chunk.css'
        }
      })
    }
    return config
  }
}

修改后重新执行next build && next start，生成的静态产物就会使用可读的名称，不带哈希标识。

方法2：更推荐的轻量调试方案（无需修改产物命名） #

如果你的核心需求是在Chrome性能面板中能关联识别到对应源码，不需要改动实际产物文件名，可以直接开启Next.js的生产环境SourceMap配置：

module.exports = {
  productionBrowserSourceMaps: true
}

开启后生产构建会生成源码映射文件，Chrome性能工具会自动将压缩后的产物映射回原始的可读文件名，完全不影响原有生产构建的缓存策略，更适合临时调试性能的场景。

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