术语图鉴/Vibe Coding/热重载
切换Esc返回

热重载 Hot Reload / HMR

你可能会说

改代码后页面能自动刷新吗?帮我配一下热重载。

改了代码后,浏览器自动刷新显示最新效果,不用手动按 F5。

改了代码后,浏览器自动刷新显示最新效果,不用手动按 F5。开发时能即时看到改动。

也常被叫作Hot Reload / HMR

生活类比

像即时预览的画板——你画一笔,画布上立刻显示,不用等「保存-关闭-重新打开」。

🎮 动手试试

保存HMR 更新页面刷新
选择题选择一个你认为最合适的答案

关于「热重载」,以下哪个描述最准确?

你可以这样告诉 AI

我改 CSS 样式每次都要手动刷新浏览器才能看到效果,帮我检查一下 Vite 的热重载配置为什么不生效。

容易混淆?这样区分

热重载 Hot Reload / HMR
热更新 Hot Update

热重载是开发时改代码自动刷新浏览器,热更新是生产环境不发版就替换线上代码。

什么时候用

频繁调整 UI 细节

改样式、调布局时热重载能立刻看到效果,不用反复手动刷新,开发效率翻倍。

和 AI 协作时

对 AI 说「帮我确认项目热重载是否正常——改一行文字,看浏览器有没有自动更新。」

什么时候不用

调试后端逻辑

热重载主要加速前端 UI 开发,后端代码改动一般需要重启服务,不适用热重载。

生产环境

热重载是开发工具,生产环境必须关闭,否则用户会看到不稳定状态的页面。

组成结构 · Anatomy

1
核心概念Core

改了代码后,浏览器自动刷新显示最新效果,不用手动按 F5。开发时能即时看到改动。

2
实际表现In Practice

像即时预览的画板——你画一笔,画布上立刻显示,不用等「保存-关闭-重新打开」。

3
与 AI 的关联AI Context

开发时改个颜色立刻看到效果,就是热重载在起作用。

典型使用场景

即时预览改动
告诉 AI「帮我确认项目的 HMR 是否正常,我改了一行文字但页面没自动更新,帮我排查一下配置」
想弄懂概念时
告诉 AI「用大白话给我解释什么是热重载,举个生活中的例子」

延伸阅读