背景
外接磁盘剩余内存比较大,想空出一些内存给内置磁盘,于是,移动了项目。跑项目发现热更失效。
根本原因
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/
}
}
另一种就是从外置内存转内置内存
转了就可以了。