我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Webpack热更新的原理是什么

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Webpack热更新的原理是什么

本篇内容介绍了“Webpack热更新的原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

Webpack热更新的原理是什么

一、是什么

HMR全称 Hot Module  Replacement,可以理解为模块热替换,指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个应用。

例如,我们在应用运行过程中修改了某个模块,通过自动刷新会导致整个应用的整体刷新,那页面中的状态信息都会丢失

如果使用的是 HMR,就可以实现只将修改的模块实时替换至应用中,不必完全刷新整个应用

在webpack中配置开启热模块也非常的简单,如下代码:

const webpack = require('webpack') module.exports = {   // ...   devServer: {     // 开启 HMR 特性     hot: true     // hotOnly: true   } }

通过上述这种配置,如果我们修改并保存css文件,确实能够以不刷新的形式更新到页面中

但是,当我们修改并保存js文件之后,页面依旧自动刷新了,这里并没有触发热模块

所以,HMR并不像 Webpack 的其他特性一样可以开箱即用,需要有一些额外的操作

我们需要去指定哪些模块发生更新时进行HRM,如下代码:

if(module.hot){     module.hot.accept('./util.js',()=>{         console.log("util.js更新了")     }) }

二、实现原理

首先来看看一张图,如下:

Webpack热更新的原理是什么

  • Webpack Compile:将 JS 源代码编译成 bundle.js

  • HMR Server:用来将热更新的文件输出给 HMR Runtime

  • Bundle Server:静态资源文件服务器,提供文件访问路径

  • HMR Runtime:socket服务器,会被注入到浏览器,更新文件的变化

  • bundle.js:构建输出的文件

  • 在HMR Runtime 和 HMR Server之间建立 websocket,即图上4号线,用于实时更新文件变化

上面图中,可以分成两个阶段:

  • 启动阶段为上图 1 - 2 - A - B

在编写未经过webpack打包的源代码后,Webpack Compile 将源代码和 HMR Runtime 一起编译成  bundle文件,传输给Bundle Server 静态资源服务器

  • 更新阶段为上图 1 - 2 - 3 - 4

当某一个文件或者模块发生变化时,webpack监听到文件变化对文件重新编译打包,编译生成唯一的hash值,这个hash值用来作为下一次热更新的标识

根据变化的内容生成两个补丁文件:manifest(包含了 hash 和 chundId,用来说明变化的内容)和chunk.js 模块

由于socket服务器在HMR Runtime 和 HMR Server之间建立  websocket链接,当文件发生改动的时候,服务端会向浏览器推送一条消息,消息包含文件改动后生成的hash值,如下图的h属性,作为下一次热更新的标识

Webpack热更新的原理是什么

在浏览器接受到这条消息之前,浏览器已经在上一次socket 消息中已经记住了此时的hash 标识,这时候我们会创建一个 ajax  去服务端请求获取到变化内容的 manifest 文件

mainfest文件包含重新build生成的hash值,以及变化的模块,对应上图的c属性

浏览器根据 manifest 文件获取模块变化的内容,从而触发render流程,实现局部模块更新

Webpack热更新的原理是什么

三、总结

关于webpack热模块更新的总结如下:

  • 通过webpack-dev-server创建两个服务器:提供静态资源的服务(express)和Socket服务

  • express server 负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)

  • socket server 是一个 websocket 的长连接,双方可以通信

  • 当 socket server 监听到对应的模块发生变化时,会生成两个文件.json(manifest文件)和.js文件(update  chunk)

  • 通过长连接,socket server 可以直接将这两个文件主动发送给客户端(浏览器)

  • 浏览器拿到两个新的文件后,通过HMR runtime机制,加载这两个文件,并且针对修改的模块进行更新

参考文献

  • https://zhuanlan.zhihu.com/p/138446061

  • https://github.com/Jocs/jocs.github.io/issues/15

  • https://juejin.cn/post/6844904134697549832

  • https://vue3js.cn/interview/

“Webpack热更新的原理是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Webpack热更新的原理是什么

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

聊聊Webpack热更新以及原理

本文介绍了 webpack 热更新的简单使用、相关的流程以及原理。

面试官:说说Webpack的热更新是如何做到的?原理是什么?

HMR全称 Hot Module Replacement,可以理解为模块热替换,指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个应用

webpack模块化的原理是什么

本篇内容介绍了“webpack模块化的原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!commonjs在webpack中既可以书写c
2023-07-05

什么是Android Multidex热更新

Multidex热更新是指在不重启应用的情况下,通过后台向app推送一个fix、dex文件,等这个文件下载完成,app提示用户发现新的更新,需要重启app。待用户重启,代码修复即会生效。Android Multidex是一种应用配置,它使您的应用能够构建和读取多个DEX文件。
什么是Android Multidex热更新
2023-10-29

webpack动态import原理是什么

今天小编给大家分享一下webpack动态import原理是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。例子// ind
2023-06-30

docker热更新的方法是什么

Docker热更新是指在容器运行过程中无需重启容器即可实现应用程序的更新。以下是几种常见的Docker热更新方法:1. 使用Docker Compose:通过Docker Compose工具,可以在容器运行过程中使用`docker-comp
2023-08-26

Java缓存更新的原理是什么

这篇文章主要介绍“Java缓存更新的原理是什么”,在日常操作中,相信很多人在Java缓存更新的原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Java缓存更新的原理是什么”的疑惑有所帮助!接下来,请跟
2023-06-04

sql批量更新的原理是什么

批量更新是指一次性更新多条记录,而不是逐条更新。在SQL中,可以使用UPDATE语句来实现批量更新操作。其原理是将一组更新操作合并为一个事务,减少数据库的交互次数,提高更新效率。当执行批量更新操作时,数据库系统会将多个更新语句打包在一起,
sql批量更新的原理是什么
2024-03-02

tomcat热部署的原理是什么

Tomcat热部署的原理是使用了Servlet规范中的"Reload"功能。当Tomcat启动时,它会监视web应用程序的文件夹,比如"WEB-INF/classes"和"WEB-INF/lib",以及Web应用程序的元数据文件"WEB-I
2023-10-23

tomcat热部署原理是什么

Tomcat热部署是指在不停止Tomcat服务器的情况下,实时更新或添加新的Java类和资源文件。其原理主要包括以下几个步骤:1. Tomcat的类加载机制:Tomcat使用了Java的类加载机制,将类加载到内存中并实例化。默认情况下,To
2023-09-15

详解Android中实现热更新的原理

这篇文章就来介绍一下Android中实现热更新的原理。 一、ClassLoader 我们知道Java在运行时加载对应的类是通过ClassLoader来实现的,ClassLoader本身是一个抽象来,Android中使用PathClassLo
2022-06-06

win10老是更新的原因是什么

这篇文章主要介绍了win10老是更新的原因是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇win10老是更新的原因是什么文章都会有所收获,下面我们一起来看看吧。win10为什么老是更新win10总是更新是因
2023-07-01

Vue2异步更新及nextTick原理是什么

这篇文章主要介绍“Vue2异步更新及nextTick原理是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue2异步更新及nextTick原理是什么”文章能帮助大家解决问题。JavaScript
2023-07-05

nginx虚拟主机热更新的方法是什么

nginx虚拟主机的热更新方法有以下几种:1. 使用Nginx的reload命令:Nginx提供了reload命令,可以重新加载Nginx的配置文件,实现虚拟主机的热更新。可以使用以下命令重新加载Nginx配置文件:```nginx -s
2023-08-31

编程热搜

目录