为何ReactJS应用更新public文件夹文件后会触发全页刷新？

该刷新仅出现在本地开发环境，是构建工具的文件监听机制检测到public目录下的文件变更后，触发了全局重载导致的，生产环境没有文件监听逻辑，不会出现该问题。

建议先将动态生成的PDF统一存放到public下的独立子目录（例如public/generated-pdfs），不要直接放在public根目录，避免误伤其他需要监听的静态资源，再根据你使用的构建工具修改对应配置即可：

1. Create React App（CRA）项目 #

• 未eject的项目可以通过craco或react-app-rewired工具覆盖webpack devServer配置
• 已eject的项目直接修改config/webpackDevServer.config.js，新增如下规则：

module.exports = function (proxy, allowedHost) {
  return {
    // 其他原有配置保持不变
    watchOptions: {
      ignored: /public\/generated-pdfs/,
      // 其他原有watch配置保持不变
    }
  }
}

2. Vite项目 #

直接修改vite.config.js，新增server.watch忽略规则：

import { defineConfig } from 'vite'

export default defineConfig({
  // 其他原有配置保持不变
  server: {
    watch: {
      ignored: ['**/public/generated-pdfs/**']
    }
  }
})

3. 自定义Webpack/Next.js项目 #

直接修改开发环境的devServer配置，给watchOptions添加对应目录的忽略规则即可，逻辑和CRA配置一致。

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