热更新是什么？
简单来说，热更新一般是指手机里的app有小规模更新，以直接打补丁的形式更新。
相对应的，另一种更新方式就是下载新的安装包，重新安装。
所以热更新在手游里头是比较常见的，毕竟游戏应用个个都几百兆起步。
那Web前端有热更新？
按上面那个说法，Web应该是不存在热更新的。
因为网页的架构是B/S，即 浏览器+服务器 ， 它不像手机app一样是 C/S 客户端+服务器
所以在网页这一块是无法推送补丁让浏览器去更新的。
那为什么我搜前端热更新有好多文章在讲？
网上大多数前端热更新讲的都是热加载 hot-loader 或者是模块热更替 HMR
热加载是什么？
- 问题背景
- 前端页面是由 HTML+CSS+JavaScript 组成的，我们前端开发页面调试的时候，
- 一般是这样：编辑器修改保存 --> 切换浏览器刷新
- ps:所以前端汪F5键是用得最多的。
- 怎么解决
- 能不能我这边修改完，浏览器就自动重新加载那些修改过的文件？
- 想要解决这个问题，那么我们就要去检测代码文件是否修改了，然后通知浏览器去重新加载。
- 那我们就需要一个浏览器与服务器之间的通信机制。
- 在早期，浏览器与服务器间的通信机制就只有http协议，可http协议是无状态协议，这就很尴尬了，而且服务器无法主动给浏览器发消息，那就能浏览器不断跟服务器请求。
- 还好在HTML5里头添加了websocket
- websocket 是一种允许浏览器与服务器间建立tcp长链接的通信机制
- tcp协议：双向通信，有状态
- 这样的话，我们就可以通过服务器检测文件修改，有修改了，我们就通知浏览器，没有我们就不通知。
盗图
所以大概流程就如下：
- 服务器检测代码是否修改了
- 修改了通知浏览器
- 浏览器根据修改的文件情况选择局部刷新或全局刷新
具体实例
- vue-loader
- webpack-dev-server
- 根据配置可以开启HMR模块
- 官方文档：doc.webpack-china.org/guides/hot-…
- 个人小demo: gitee.com/gitzt/webpa…
试一下
"scripts": { "test": "echo "Error: no test specified" && exit 1
| 
转播
