这个东西其实我每一开始以为是类似于nodemon的东西,也就是监视文件变化,加一个防抖,然后重新启动服务
但这个不太一样的点在于发生的位置,因为文件更改是在后端的位置,而需要随之更改的地方在浏览器,如果更新一次就是重启一次,那么就是整个文件反反复复从后端传过来,可能还要重新打包
无论是时间还是传输体积,都不太乐观
热更新依赖于两个方案
WebSocket: 一种允许浏览器与服务器间建立tcp长链接的通信机制
EventSource(Server-Sent-Events): 服务器推送的一个网络事件接口。一个EventSource实例会对HTTP服务开启一个持久化的连接,以 text/event-stream 格式发送事件, 会一直保持开启直到被要求关闭。 别问我这是啥,我也不知道
下面一段抄来的 与WebSocket不同的是,EventSource服务端推送是单向的。数据信息被单向从服务端到客户端分发. 当不需要以消息形式将数据从客户端发送到服务器时,这使EventSource成为绝佳的选择。
区别: SSE 支持断开重连,WebSocket需要自己实现
SSE 使用 HTTP 协议,现有的服务器软件都支持。WebSocket 是一个独立协议。
SSE一般只用来传送文本,二进制数据需要编码后传送,WebSocket 默认支持传送二进制数据
SSE 支持自定义发送的消息类型。
webpack热更新原理 热加载:不保留页面状态,简单粗暴直接刷新浏览器,类似window.location.reload() 热更新: 另一种是基于 WDS (Webpack-dev-server) 的模块热替换,只需要局部刷新页面上发生变化的模块,同时可以保留当前的页面状态(webpack-dev-server自己做不到,需要配合react-hot-loader使用),比如复选框的选中状态、输入框的输入等
每次更新, 改变的文件名打包后的hash值就会变化,一旦变化,浏览器就会请求过来 会有一个json文件,里面就是告知浏览器打包后的文件名hash变化成了啥,从而进行请求
这个我好像自个儿实现不了,应该要立足于两个基本点,一是告知浏览器,即通过websocket,二是用hash表示变化情况