fgs记录行

vuePress-theme-reco fgs    2021 - 2022
fgs记录行 fgs记录行
主页
博客
  • 随笔
  • 总结文章
  • 技术笔记
  • 复盘
  • 技术笔记 未完成
标签
时间轴
关于
author-avatar

fgs

48

文章

46

标签

主页
博客
  • 随笔
  • 总结文章
  • 技术笔记
  • 复盘
  • 技术笔记 未完成
标签
时间轴
关于

热加载的第一印象

vuePress-theme-reco fgs    2021 - 2022

热加载的第一印象

fgs 2021-09-14 Webpack

这个东西其实我每一开始以为是类似于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表示变化情况