https://fe-interview.pangcy.cn/tags/hmr%E5%8E%9F%E7%90%86/Recent content in HMR原理 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/engineering/webpack/webpack-22/Wed, 05 Mar 2025 09:59:05 +0000https://fe-interview.pangcy.cn/docs/engineering/webpack/webpack-22/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>本题主要考察候选人以下三个维度的能力：</p> <ol> <li><strong>构建工具原理理解</strong>：区分构建工具核心功能的实现差异</li> <li><strong>模块化开发认知</strong>：理解现代前端工程中模块替换的底层机制</li> <li><strong>开发体验优化意识</strong>：评估对开发效率工具的深度认知</li> </ol> <p>具体技术点包括：</p> <ul> <li>全量刷新与增量更新的本质区别</li> <li>Webpack HMR的信号传输机制</li> <li>模块依赖关系维护</li> <li>状态保持技术实现</li> <li>浏览器与构建工具的协作方式</li> </ul> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点">关键知识点 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>HMR机制 &gt; 模块热替换流程 &gt; WebSocket通信 &gt; 模块依赖图</p> <h3 id="核心差异对比">核心差异对比 <a href="#%e6%a0%b8%e5%bf%83%e5%b7%ae%e5%bc%82%e5%af%b9%e6%af%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><table> <thead> <tr> <th>维度</th> <th>Live-Reload</th> <th>HMR</th> </tr> </thead> <tbody> <tr> <td>更新范围</td> <td>整页刷新</td> <td>精确到模块级替换</td> </tr> <tr> <td>状态保持</td> <td>完全重置</td> <td>保留应用状态</td> </tr> <tr> <td>传输内容</td> <td>全量资源</td> <td>差异模块+补丁</td> </tr> <tr> <td>实现复杂度</td> <td>简单（文件监听）</td> <td>复杂（依赖图维护）</td> </tr> </tbody> </table> <h3 id="hmr实现原理">HMR实现原理 <a href="#hmr%e5%ae%9e%e7%8e%b0%e5%8e%9f%e7%90%86" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li> <p><strong>更新信号传递</strong>：Webpack Dev Server通过WebSocket建立双工通信，文件变更时向浏览器推送hash值和manifest</p> </li> <li> <p><strong>模块补丁生成</strong>：Webpack对比两次编译结果，生成更新补丁（JSON Patch格式）</p> </li> <li> <p><strong>热替换执行</strong>：</p> <pre class="mermaid">graph TD A[检测到文件变更] --&gt; B[重新编译生成模块图] B --&gt; C[生成差异补丁] C --&gt; D[通过WebSocket推送消息] D --&gt; E[客户端运行时请求更新] E --&gt; F[按依赖顺序执行更新] </pre> </li> <li> <p><strong>状态保留</strong>：通过模块的<code>hot.accept</code>方法声明接收更新，由HMR Runtime执行更新后触发回调</p> </li> </ol> <h3 id="常见误区">常见误区 <a href="#%e5%b8%b8%e8%a7%81%e8%af%af%e5%8c%ba" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ul> <li>认为HMR不需要刷新页面（部分复杂更新仍需整页刷新）</li> <li>混淆WebSocket与HTTP长轮询的通信机制</li> <li>忽略模块边界处理（如CSS模块与JS模块的不同处理方式）</li> </ul> <h2 id="问题解答">问题解答 <a href="#%e9%97%ae%e9%a2%98%e8%a7%a3%e7%ad%94" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>Live-Reload与HMR的核心差异在于更新粒度与状态保持能力。Live-Reload通过监听文件变化触发整页刷新，导致应用状态丢失；HMR则通过模块依赖分析实现局部更新，配合模块系统的accept机制保留运行时状态。</p>