为何fs.promises.writeFile导致Electron页面重渲染？如何阻止？

原因分析 #

• 存储文件位于项目源码目录（如src/store/storageFile.json），被开发环境的构建工具（Webpack、Vite等）的文件监听机制捕获，文件修改触发热重载导致页面重渲染。
• 渲染进程中的状态管理工具（Vuex、Redux等）或组件直接依赖该文件内容，文件更新后触发依赖项变更，引发组件重渲染。
• 部分开发工具会监听项目内所有文件的变化，包括自定义存储文件，一旦文件内容修改就自动触发页面重载。

解决方法 #

• 迁移存储文件路径
  不要将存储文件放在源码目录下，改用Electron提供的用户数据目录（该目录不属于项目源码，不会被开发工具监听）：

  const { app } = require('electron');
  const path = require('path');
  const fs = require('fs').promises;
  
  ipcMain.on("saveData", async (event, data) => {
    const sData = JSON.stringify(data);
    // 获取系统默认的用户数据目录
    const storagePath = path.join(app.getPath('userData'), 'storageFile.json');
    try {
      await fs.writeFile(storagePath, sData);
    } catch (err) {
      console.error(err);
    }
  });
  

• 排除构建工具的文件监听
  在开发环境的构建配置中，排除对存储文件的监听：

  • Vite配置（vite.config.js）：

    export default {
      server: {
        watch: {
          ignored: ['**/storageFile.json']
        }
      }
    }
    

  • Webpack配置（webpack.config.js）：

    module.exports = {
      watchOptions: {
        ignored: /storageFile.json/
      }
    }
    

• 优化渲染进程数据获取方式
  禁止渲染进程直接读取本地文件，通过IPC通信从主进程获取数据，避免文件变更直接触发渲染进程的依赖更新：
  主进程新增数据读取接口：

  ipcMain.handle('getStoredData', async () => {
    const storagePath = path.join(app.getPath('userData'), 'storageFile.json');
    try {
      const rawData = await fs.readFile(storagePath, 'utf8');
      return JSON.parse(rawData);
    } catch (err) {
      return {};
    }
  });
  

  渲染进程通过IPC获取数据：

  const { ipcRenderer } = require('electron');
  
  // 在组件初始化或需要时调用，而非直接读取文件
  async function loadStoredData() {
    const data = await ipcRenderer.invoke('getStoredData');
    // 处理数据
  }
  

• 移除无效代码
  IPC事件不存在默认行为，event.preventDefault()完全无效，可直接删除该行代码。

内容的提问来源于stack exchange，提问作者Osman Talha Aydın