mac 外接磁盘,热更新失效

背景

外接磁盘剩余内存比较大,想空出一些内存给内置磁盘,于是,移动了项目。跑项目发现热更失效。

根本原因

Mac 前端工具(Vite或者Webpack)默认是依靠 FSEvents 系统原生事件监听文件的修改的。

外接的 移动硬盘 或者 固态U盘 属于外部挂载文件系统,存在下面两个问题:

  • FSEvents事件丢失、延迟:外置磁盘的文件写入事件无法完整、实时传递给 Node 的 chokidar监听器,保存代码后工具完全收不到变更通知,自然不触发热编译 HMR。

  • IDE安全写入冲突:VSCode、WebStorm 默认安全写入机制(临时文件替换)在外置盘会拆分文件事件,监听器识别不到有效修改。

当然还有额外干扰:移动硬盘闲置休眠、usb读写延迟、外置盘ntfs第三方挂载驱动不稳定,进一步加剧监听失效。

解决

如果并不想从外置又移动到内置内存当中,那么考虑一下试试下面方案。

方案1:

vite 项目(Vue、React,90%前端项目在用)

vite.config.js/ts, 强制轮询扫描文件,放弃 mac 衍生 FSEvents 监听:

js 复制代码
export default defineConfig({
  plugins: [vue()],
  server: {
      hmr: true, // 确保热更开启
      watch: {
        usePolling: true, // 外置磁盘必开,轮询替代系统事件
        interval: 150, // 扫描间隔(ms),数值越小越灵敏
        binaryInterval: 300,
        ignored: ['**/node_modules/**', '**/dist/**'] // 减少监听压力
      }
  }
})

修改后重启dev服务,保存代码即可正常热更。

方案2: Webpack项目(Vue2 / React)

webpack-dev-server配置开启轮询:

js 复制代码
devServer: {
  hot: true,
  watchOptions: {
    poll: 150, // 开启轮询
    ignored: /node_modules/
  }
}

另一种就是从外置内存转内置内存

转了就可以了。

相关推荐
那些年丶ny1 小时前
颜色扩展库
前端·javascript·数据可视化
ihuyigui1 小时前
海外签收通知短信接口
android·java·开发语言·前端·数据库·后端
YWL1 小时前
OpenLayers + Vue 2 使用指南(01)
前端·javascript·vue.js
腾渊信息科技公司2 小时前
Spring Boot + TDengine:工业视觉检测数据实时同步方案实战
spring boot·后端·tdengine
暖和_白开水2 小时前
数据分析agent (七):contextvars 模块上下文request_id
java·前端·数据分析
用户40966601317512 小时前
MyBatis、MyBatis-Plus、通用 Mapper:一张图说清三者的血缘关系
后端
程序员黑豆2 小时前
鸿蒙应用开发:Flex 组件从入门到实战
前端·华为·harmonyos
大爱编程♡2 小时前
Vue3+TypeScript+element-plus的文章管理项目(配后端接口)-退出及文章管理页面
前端·javascript·typescript
先吃饱再说2 小时前
React 组件设计:从 Props 传递到组件封装
前端·react.js