引言

在angular-start项目中启用了模块热替换(HMR - Hot Module Replacement)功能，关于如何在angular-cli启用HRM，请查看HRM配置

那HMR是个什么东西呢？

HMR是webpack提供的一个功能，angular-cli使用了它，它会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

保留在完全重新加载页面时丢失的应用程序状态

只更新变更内容，以节省宝贵的开发时间

调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式

这一切是如何运行的？

我们先看看具体的效果：

1、启动angular-start项目，在控制台你可以看到HRM已经启用的消息：

2、然后通过浏览器控制台可以看到，第一次加载请求了所有的资源：

3、此时，修改一处代码保存，浏览器并未刷新就自动显示修改之后的效果，再看浏览器控制台只请求了新修改的js：

下面让我们从一些不同的角度观察，以了解HMR的工作原理……

在应用程序中

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

应用程序代码要求 HMR runtime 检查更新

HMR runtime(异步)下载更新，然后通知应用程序代码

应用程序代码要求 HMR runtime 应用更新

HMR runtime(异步)应用更新

在编译器中

除了普通资源，编译器(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中

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

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

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

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

ASP.NET MVC5 网站开发实践(二) Member区域–我的咨询列表及添加咨询

上次把咨询的架构搭好了,现在分两次来完成咨询:1.用户部分,2管理部分.这次实现用户部分,包含两个功能,查看我的咨询和进行咨询. 目录: ASP.NET MVC5 网站开发实践 - 概述 ASP.NE ...

Angular开发实践(一)：环境准备及框架搭建

引言 在工作中引入Angular框架将近一年了,在这一年中不断的踩坑和填坑,当然也学习和积累了很多的知识,包括MVVM框架.前后端分离.前端工程化.SPA优化等等.因此想通过Angular开发实践这系 ...

ASP.NET MVC5 网站开发实践(二) Member区域–管理列表、回复及删除

本来想接着上次把这篇写完的,没想到后来工作的一些事落下了,放假了赶紧补上. 目录: ASP.NET MVC5 网站开发实践 - 概述 ASP.NET MVC5 网站开发实践(一) - 项目框架 ASP ...

ASP.NET MVC5 网站开发实践(二) Member区域 - 咨询管理的架构

咨询.留言.投诉等功能是网站应具备的基本功能,可以加强管理员与用户的交流,在上次完成文章部分后,这次开始做Member区域的咨询功能(留言.投诉都是咨询).咨询跟文章非常相似,而且内容更少.更简单. ...

ASP.NET MVC5 网站开发实践(二) Member区域 - 修改及删除文章

上次做了显示文章列表,再实现修改和删除文章这部分内容就结束了,这次内容比较简单,由于做过了添加文章,修改文章非常类似,就是多了一个TryUpdateModel部分更新模型数据.   目录: ASP.N ...

ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表

显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据   目录 ASP.N ...

ASP.NET MVC5 网站开发实践(二) Member区域 - 添加文章

上次把架构做好了,这次做添加文章.添加文章涉及附件的上传管理及富文本编辑器的使用,早添加文章时一并实现. 要点: 富文本编辑器采用KindEditor.功能很强大,国人开发,LGPL开源,自己人的好东 ...

ASP.NET MVC5 网站开发实践(二) Member区域 - 文章管理架构

上次把member的用户部分完成,现在开始做文章管理部分.文章部分根据涉及显示现实文章列表,发布文章,修改文章,删除文章等功能.最终的实现目标是使用权限来控制用户是否能进行相应操作,管理员权限的会显示 ...

ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分(3)修改资料、修改密码

在上一篇博客中实现了用户的注销和登录,其实代码里落了点东西,就是用户登录要更新最后一次登录时间和登录IP,这次补上.今天做修改资料和修改密码,TryUpdateModel是新用到的东西. 目录: AS ...

ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分(2)用户登录、注销

上次实现了用户注册,这次来实现用户登录,用到IAuthenticationManager的SignOut.SignIn方法和基于声明的标识.最后修改用户注册代码实现注册成功后直接登录. 目录: ASP ...

随机推荐

shell脚本学习第一课

shell是一种程序设计语言,是访问操作系统内核的服务. Linux的shell种类常见的有: Bourne Shell(/usr/bin/sh或/bin/sh) Bourne Again Shell ...

JS正则截取两个字符串之间的字符串

match方法 var str = "iid0000ffr"; var substr = str.match(/id(\S*)ff/); console.log(substr) 返 ...

Android 自动化测试—robotium(六) 通过命令行执行Robotium自动化测试用例及导出报告

1.运行测试工程下的所有用例 adb shell am instrument -w com.application.test/android.test.InstrumentationTestRunne ...

30、准确计算CoreText高度的方法

http://ios-iphone.diandian.com/post/2012-03-29/18389515 - (int)getAttributedStringHeightWithString:( ...

Dijkstra最短路径算法

#include #include #include #include # ...

关于C#的委托

作者  陈嘉栋(慕容小匹夫) 阅读目录 0x00 前言 0x01 从观察者模式说起 0x02 向Unity3D中的SendMessage和BroadcastMessage说拜拜 0x03 认识回调函数 ...

Invalid content was found starting with element 'taglib'”

今天在使用struts-menu制作菜单,在web.xml中写入      /WEB-INF/struts-menu.tld ...

windows下安装Django

因为Django本身是由Python编写,所以先要安装Python.下载地址(可以根据读者当前版本自行下载):http://www.python.org/download/releases/3.3.4 ...

PHP多维数组元素操作类

我的框架里面一个多维数组元素操作类,主要用于读取数组中配置数据,可以通过字符串节点的方式:a.b.c 来获取和设置元素,以及多维数组的覆盖,有需求的可以参考下吧! <?php /** * Cre ...