模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:

  • 保留在完全重新加载页面时丢失的应用程序状态。
  • 只更新变更内容,以节省宝贵的开发时间。
  • 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

在应用程序中

通过以下步骤,可以做到在应用程序中置换(swap in and out)模块:

  1. 应用程序代码要求 HMR runtime 检查更新。
  2. HMR runtime(异步)下载更新,然后通知应用程序代码。
  3. 应用程序代码要求 HMR runtime 应用更新。
  4. HMR runtime(异步)应用更新。

你可以设置 HMR,以使此进程自动触发更新,或者你可以选择要求在用户交互时进行更新。

在编译器中

除了普通资源,编译器(compiler)需要发出 "update",以允许更新之前的版本到新的版本。"update" 由两部分组成:

  1. 更新后的 manifest(JSON)
  2. 一个或多个更新后的 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)进行更新。如果在这个模块树中,一个单独的模块被更新,那么整组依赖模块都会被重新加载。

在 HMR Runtime 中

对于模块系统的 runtime,附加的代码被发送到 parents 和 children 跟踪模块。在管理方面,runtime 支持两个方法 check 和 apply

  check 发送 HTTP 请求来更新 manifest。如果请求失败,说明没有可用更新。如果请求成功,待更新 chunk 会和当前加载过的 chunk 进行比较。对每个加载过的 chunk,会下载相对应的待更新 chunk。当所有待更新 chunk 完成下载,就会准备切换到 ready 状态。

  apply 方法将所有被更新模块标记为无效。对于每个无效模块,都需要在模块中有一个更新处理函数,或者在它的父级模块们中有更新处理函数。否则,无效标记冒泡,并也使父级无效。每个冒泡继续直到到达应用程序入口起点,或者到达带有更新处理函数的模块(以最先到达为准)。如果它从入口起点开始冒泡,则此过程失败。

之后,所有无效模块都被(通过 dispose 处理函数)处理和解除加载。然后更新当前 hash,并且调用所有 "accept" 处理函数。runtime 切换回闲置状态,一切照常继续。

webpack学习之—— 模块热替换(Hot Module Replacement)的更多相关文章

  1. webpack学习_模块热替换(Hot Module Peaplacement)

    模块热替换(Hot Module Replacement 或 HMR) 是webpack提供的最有用的功能之一.允许在u女性是更新各种模块,而无需进行完全刷新. 启用HMR 承接之前的代码 webpa ...

  2. 【webpack】-- 模块热替换

    全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生 ...

  3. Webpack 开发工具与模块热替换

    Webpack 开发工具与模块热替换 ​⚠️ 注意: 永远不要在生产环境中使用这些工具,永远不要. devtool 当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行.然 ...

  4. 启用 webpack 的模块热替换特性

    启用 webpack 的模块热替换特性: module.exports = { //... devServer: { hot: true } } 注意,必须有 webpack.HotModuleRep ...

  5. webpack 模块热替换的理解和使用

    模块热替换(webpack文档上也叫 Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时更新各种模块,而无需进行完全刷新. 这句话其实 ...

  6. Webpack探索【8】--- 模块热替换详解

    本文主要讲模块热替换相关内容.

  7. webpack学习之——模块(Modules)

    在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块. 每个模块具有比完整程序更小的接触面,使得校验.调试.测试轻而易举. 精 ...

  8. 模块热替换 HMR

    devserver:{hot:true},既及时更新代码,样式(需配合loader)变化,自动重编译,只适用于开发环境. 入口文件中,添加监视: + if (module.hot) {+ module ...

  9. webpack(6)-模块热替代&tree shaking

    模块热替换(hot module replacement 或 HMR) 模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时 ...

随机推荐

  1. 在Linux中使用selenium(环境部署)

    1.安装chrome 用下面的命令安装Google Chrome yum install https://dl.google.com/linux/direct/google-chrome-stable ...

  2. [Ceoi2007]Royaltreasury

    #1945. [Ceoi2007]Royaltreasury Online Judge:Bzoj-1945 Label:树形Dp,高精度 题目描述 在很久很久以前的一个王国里,王国的财产开始变得越来越 ...

  3. html特殊字符 编码css3 content:"特殊符号"一览

    工作中经常会用到用纯css3美化复选框 <div class="cross"></div> css代码.cross{ width: 20px; height ...

  4. ArcGIS中线转面

    1. 打开ArcMap用Add Data加载shp Polyline线文件. 2. 选Editor编辑\Start Editing开始编辑. 3. 选Editor编辑\More Editing Too ...

  5. org.hibernate.service.spi.ServiceException: Unable to create requested service [org.hibernate.engine.jdbc.connections.spi.ConnectionProvider]

    从hibernate3升级到4应该会遇到 应该添加引用 <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-c3p0 ...

  6. String和StringBuffer的区别;字符串的一些基本方法

    String 和 StringBuffer区别 字符串广泛应用 在Java 编程中,在 Java 中字符串属于对象,Java 提供了 String 类来创建和操作字符串. 需要注意的是,String的 ...

  7. Python实例3-字符图网格

    假定有一个列表的列表, 内层列表的每个值都是包含一个字符的字符串, 像这样: grid = [['.', '.', '.', '.', '.', '.'], ['.', 'O', 'O', '.', ...

  8. Linux中如何安装mysql数据库

    安装mysql 1.解压源码压缩包 如果服务器可以上网也可以采用在线安装方式,在线安装操作简单具体见下面在线安装步骤 进入源码压缩包所在目录输入#tar -zxvf mysql-5.6.17-linu ...

  9. JQuery--extend的使用

    $.extend({a,b,c},{a,bd}); 里面的对象属性如果 存在就替换,如果不存在就添加 var loadData = function (order) { var obj = getPa ...

  10. bootstrap--响应式框架页面环境配置

    那就目录结构 页面环境代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <!--默认编码--& ...