webpack-Hot Module Replacement(热更新)
模块热替换(Hot Module Replacement)
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:
- 保留在完全重新加载页面时丢失的应用程序状态。
- 只更新变更内容,以节省宝贵的开发时间。
- 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
这一切是如何运行的?
让我们从一些不同的角度观察,以了解 HMR 的工作原理……
在应用程序中
通过以下步骤,可以做到在应用程序中置换(swap in and out)模块:
- 应用程序代码要求 HMR runtime 检查更新。
- HMR runtime(异步)下载更新,然后通知应用程序代码。
- 应用程序代码要求 HMR runtime 应用更新。
- HMR runtime(异步)应用更新。
你可以设置 HMR,以使此进程自动触发更新,或者你可以选择要求在用户交互时进行更新。
在编译器中
除了普通资源,编译器(compiler)需要发出 "update",以允许更新之前的版本到新的版本。"update" 由两部分组成:
- 更新后的 manifest(JSON)
- 一个或多个更新后的 chunk (JavaScript)
manifest 包括新的编译 hash 和所有的待更新 chunk 目录。
每个更新 chunk 都含有对应于此 chunk 的全部更新模块(或一个 flag 用于表明此模块要被移除)的代码。
编译器确保模块 ID 和 chunk ID 在这些构建之间保持一致。
通常将这些 ID 存储在内存中(例如,使用 webpack-dev-server 时),但是也可能将它们存储在一个 JSON 文件中。
在模块中
HMR 是可选功能,只会影响包含 HMR 代码的模块。
举个例子,通过 style-loader
为 style 样式追加补丁。
为了运行追加补丁,style-loader
实现了 HMR 接口;当它通过 HMR 接收到更新,它会使用新的样式替换旧的样式。
类似的,当在一个模块中实现了 HMR 接口,你可以描述出当模块被更新后发生了什么。
然而在多数情况下,不需要强制在每个模块中写入 HMR 代码。
如果一个模块没有 HMR 处理函数,更新就会冒泡。
这意味着一个简单的处理函数能够对整个模块树(complete module tree)进行更新。
如果在这个模块树中,一个单独的模块被更新,那么整组依赖模块都会被重新加载。
有关 module.hot
接口的详细信息,请查看 HMR API 页面。
在 HMR Runtime 中
这些事情比较有技术性……如果你对其内部不感兴趣,可以随时跳到 HMR API 页面或 HMR 指南。
对于模块系统的 runtime,附加的代码被发送到 parents
和 children
跟踪模块。
在管理方面,runtime 支持两个方法 check
和 apply
。
check
发送 HTTP 请求来更新 manifest。如果请求失败,说明没有可用更新。
如果请求成功,待更新 chunk 会和当前加载过的 chunk 进行比较。
对每个加载过的 chunk,会下载相对应的待更新 chunk。
当所有待更新 chunk 完成下载,就会准备切换到 ready
状态。
apply
方法将所有被更新模块标记为无效。
对于每个无效模块,都需要在模块中有一个更新处理函数,或者在它的父级模块们中有更新处理函数。
否则,无效标记冒泡,并也使父级无效。
每个冒泡继续直到到达应用程序入口起点,或者到达带有更新处理函数的模块(以最先到达为准)。
如果它从入口起点开始冒泡,则此过程失败。
之后,所有无效模块都被(通过 dispose 处理函数)处理和解除加载。
然后更新当前 hash,并且调用所有 "accept" 处理函数。
runtime 切换回闲置
状态,一切照常继续。
入门
在开发过程中,可以将 HMR 作为 LiveReload 的替代。webpack-dev-server 支持 hot
模式,在试图重新加载整个页面之前,热模式会尝试使用 HMR 来更新。更多细节请查看模块热更新指南。
与许多其他功能一样,webpack 的强大之处在于它的可定制化。取决于特定项目需求,会有许多种配置 HMR 的方式。然而,对于多数实现来说,webpack-dev-server
能够配合良好,可以让你快速入门 HMR。
webpack-Hot Module Replacement(热更新)的更多相关文章
- webpack 环境搭建+实现热更新
让我们一起构建一个小的app 为了便于你更好的了解Webpack带来的好处,我们将会构建一个非常小的app并将资源文件打包.在这个教程中我推荐基于Node4或Node5和NPM3来进行开发,这样就避免 ...
- how webpack Hot Module Replacement works
https://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07
- 优化单页面开发环境:webpack与react的运行时打包与热更新
前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...
- webpack热更新问题和antd design字体图标库扩展
标题也不知道怎么写好,真是尴尬.不过话说回来,距离上一次写文快两个月了,最近有点忙,一直在开发新项目, 今天刚刚闲下来,项目准备提测.借这个功夫写点东西,把新项目上学到的一些好的干活分享一下,以便之后 ...
- vue-vli3创建的项目配置热更新
vue-vli3创建的项目配置热更新 问题描述:使用vue-cli3创建的项目,修改代码之后,浏览器页面不会自动刷新,然而之前使用webpack初始化的vue项目修改代码之后浏览器会重新加载一下,因为 ...
- webpack学习之—— 模块热替换(Hot Module Replacement)
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换.添加或删除模块,而无需重新加载整个页面.主要是通过以下几种方式,来显著加快开发速度: 保留在完全重 ...
- webpack的Hot Module Replacement运行机制
使用webpack打包,难免会使用Hot Module Replacement功能,该功能能够实现修改.添加或删除前端页面中的模块代码,而且是在页面不刷新的前提下.它究竟是怎么运作的呢?本文主要从调试 ...
- webpack与browser-sync热更新原理深度讲解
本文首发于CSDN网站,下面的版本又经过进一步的修订.原文:webpack与browser-sync热更新原理深度讲解本文包含如下内容: webpack-hot-middleware EventSou ...
- webpack的热更新
webpack的热更新是如何做到的?说明其原理? webpack的热更新又称热替换(Hot Module Replacement),缩写为HMR. 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉 ...
随机推荐
- Markdown的安装和语法
步骤: 1.打开webstorm,File-->Setting-->输入plugin-->Install JetBrains plugin-->输入markdown--> ...
- “xxxx”表 - 无法修改表。 不能将值 NULL 插入列 'xxxx'
问题 向已有表增加字段 执行下面sql,sql执行增加两个字段分别: articleTitle 正标题 [nvarchar](200) articleSubTitle 副标题 [nvarchar](2 ...
- 关于C/C++的一些思考(5)
运算符重载函数的限制: 五个不能实现重载的符号:".", ".*", "::", "?", "sizeof&q ...
- mysql中使用load data infile导入数据的用法
有时需要将大量数据批量写入数据库,直接使用程序语言和Sql写入往往很耗时间,其中有一种方案就是使用mysql load data infile导入文件的形式导入数据,这样可大大缩短数据导入时间. LO ...
- pycharm的快捷键以及常用设置
1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性) Ctrl + Alt + Space 快速导入任意类 Ctrl + Shift + Enter 语句完成 Ctr ...
- SpringMVC中controller的跳转
controller中的重定向 (1)不需要传递参数重定向 方式一:使用ModelAndView return new ModelAndView("redirect:/toLi ...
- Mybatis中实体类属性和数据列之间映射的四种办法
http://blog.csdn.net/lmy86263/article/details/53150091 Mybatis不像hibernate中那么自动化,通过@Column注解或者直接使用实体类 ...
- 刁肥宅详解中缀表达式求值问题:C++实现顺序/链栈解决
1. 表达式的种类 如何将表达式翻译成能够正确求值的指令序列,是语言处理程序要解决的基本问题,作为栈的应用事例,下面介绍表达式的求值过程. 任何一个表达式都是由操作数(亦称运算对象).操作符(亦称运算 ...
- 利用OpenXml读取、导出Excel
OpenXml是通过 XML 文档提供行集视图.由于OPENXML 是行集提供程序,因此可在会出现行集提供程序(如表.视图或 OPENROWSET 函数)的 Transact-SQL 语句中使用 OP ...
- 【Codeforces 140A】New Year Table
[链接] 我是链接,点我呀:) [题意] 题意 [题解] 算出来每个盘子要占用多少角度. 然后乘n看看是不是小于等于2π就好 (精度最好定在1e-7) [代码] #include <bits/s ...