简单实现Vite的HRM热更新 ———《第二篇热更新上》

- 热更新过程

在server端发现了文件更新，推送一个事件到浏览器前端，浏览器知道文件更新了，重新请求这个新的模块，去替换老的模块。

- 操作过程

首先npm init @vitejs/app
选择vanilla空项目

一开始mian.js为，且我们修改代码页面会刷新，而不是热更新。

先把该操作封装到render函数里面执行，我们热更新需要引入判断import.meta.hot是否有没有，像我们线上环境就不用热更新的。

if (import.meta.hot) {import.meta.hot.accept((newModule) => {newModule.render()})
}

我们看看控制台每次我们该一次代码，这里多出一个mian.js的请求，且页面不刷新。

这些请求来的js即是Vite集成的dev server每次来的，之间的通过webSoket服务，文件更新通知浏览器请求新的模块。

简单实现Vite的HRM热更新 ———《第二篇热更新上》相关推荐

【.NET Core 跨平台 GUI 开发】第二篇：Gtk# 布局入门，初识HBox 和 VBox
这是 Gtk# 系列博文的第二篇.在上一篇博文<编写你的第一个 Gtk# 应用>中,我们提到"一个 Gtk.Window 只能直接包含一个部件".这意味着,在不做其他额 ...
热修复——Bugly让热修复变得如此简单
一.简述在上一篇<热修复--Tinker的集成与使用>中,根据Tinker官方Wiki集成了Tinker,但那仅仅只是本地集成,有一个重要的问题没有解决,那就是补丁从服务器下发到用户手机 ...
Lua快速入门篇（XLua教程）（Yanlz+热更新+xLua+配置+热补丁+第三方库+API+二次开发+常见问题+示例参考）
<Lua热更新> ##<Lua热更新>发布说明: ++++"Lua热更新"开始了,立钻哥哥终于开始此部分的探 ...
native react 更新机制_react-native热更新全方位讲解
最近在研究热更新技术,看了网上各个大佬的博客,整体流程上总是卡壳.跳了几天坑,刚刚终于把简单的热更新流程跑通,现在也正在一边学习更新,一边整理资料,在此篇博客上记录操作流程,希望我的实践能帮助各位同行 ...
Visual C++ 2008入门经典第二十一章更新数据源
/* 第二十一章更新数据源本章主要内容:1 数据库事务2 如何使用记录集对像更新数据库3 如何在更新操作中将数据从记录集传输到数据库4 如何更新表中的现有行5 如何添加新行到表中21.1 更新操作2 ...
Unity3D热更新技术点——ToLua（上）
注: 本文主要介绍tolua的基本原理及其在unity中的使用,希望阅读本文的读者有lua基础,可通过Lua教程 (其中也有IDE的推荐等)或其他途径先进行lua 的学习热更新在介绍tolua前, ...
【热更新】游戏热更新方案
游戏热更新方案热更新演化热更新方案 [1] 进程切换 1.1 利用fork.exec切换 1.2 利用网关切换 1.3 微服务 - 进程切换注意要点 [2] 动态库替换 [3] 脚本语言热更新热 ...
数据库第一类第二类丢失更新
第一类丢失更新(回滚丢失,Lost update) A事务撤销时,把已经提交的B事务的更新数据覆盖了.这种错误可能造成很严重的问题,通过下面的账户取款转账就可以看出来: 时间取款事务A 转账事务B ...
RN 实现热更新及手动热更新，记录实现的方式
需求:App需要一个热更新的功能,可以默认更新用来修正线上问题实现路线: 使用微软的依赖包 react-native-code-push 实现步骤全局安装code-push-cli npm i - ...

简单实现Vite的HRM热更新 ———《第二篇热更新上》

- 热更新过程

- 操作过程

简单实现Vite的HRM热更新 ———《第二篇热更新上》相关推荐

最新文章

热门文章