概念
在程序运行时可以进行增加、删除、修改模块而无需重新加载整个页面
效果：
- 保留在完全重新加载页面期间丢失的应用程序状态。
- 只更新变更内容，以节省开发时间。
- 在源代码中对 CSS/JS 进行修改，会立刻在浏览器中进行更新，这几乎相当于在浏览器 devtools 直接更改样式。
实现方式
- Webpack编译期，为需要热更新的 entry 注入热更新代码(EventSource通信)---注入代码
- 页面首次打开后，服务端(webpack-dev-server)与客户端(浏览器)通过 EventSource 建立通信渠道，把下一次的 hash 返回前端---建立通信
- 客户端获取到hash，这个hash将作为下一次请求服务端 hot-update.js 和 hot-update.json的hash
- 修改页面代码后，Webpack 监听到文件修改后，开始编译，编译完成后，发送 build 消息给客户端---监听、编译、发送给浏览器
- 客户端获取到hash，成功后客户端构造hot-update.js script链接，然后插入主文档
- hot-update.js 插入成功后，执行hotAPI 的 createRecord 和 reload方法，获取到 Vue 组件的 render方法，重新 render 组件， 继而实现 UI 无刷新更新。
网友评论