Angular开发实践(二):HRM运行机制
引言
在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
切换回闲置状态,一切照常继续。
Angular开发实践(二):HRM运行机制的更多相关文章
- 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 ...
随机推荐
- POJ - 2387 最短路
思路:用dijkstra算法,是无向图. AC代码: #include <cstdio> #include <cmath> #include <cctype> #i ...
- CodeForces-748D 贪心
这题的思维难度不是很大,属于编程实现细节处理较多的题. 暂且把每个字符串的"beauty"称为魅力值,用一个优先队列数组将同一个字符串的所有魅力值保存,通过map将不同字符串编号, ...
- 【BZOJ3529】【SDOI2014】 数表
Time Limit: 10 Sec Memory Limit: 512 MB Description 有一张\(n×m\)的数表,其第i行第j列(\(,1 \le i \leq n,1 \le ...
- trigger click 和 click 的区别??
trigger click 和 user click 有什么区别吗? 好像没有的.直到发现了这样一段代码. <button class="btn1">Button< ...
- yii学习笔记--快速创建一个项目
下载yii框架 下载地址:http://www.yiiframework.com/ 中文网站:http://www.yiichina.com/ 解压文件
- 拼接SQL语句缺少“break”
1.错误描述 [ERROR:]2015-07-20 16:42:21,734 [插入失败] org.hibernate.exception.SQLGrammarException: error exe ...
- Java考查“==”和equals
/** * */ package com.you.demo; /** * @author YouHaiDong * @date 2015-04-02 */ public class Welcome { ...
- Redis进阶实践之十五 Redis-cli命令行工具使用详解第二部分(结束)
一.介绍 今天继续redis-cli使用的介绍,上一篇文章写了一部分,写到第9个小节,今天就来完成第二部分.话不多说,开始我们今天的讲解.如果要想看第一篇文章,地址如下:http: ...
- java自带的类压缩和下载,以及递归删除动态的文件(shiro项目中来的十)
详见项目,不用借助于任何外在的jar包,通过jre自带的实现.
- 使用 LINQPad 助力 LINQ 学习
简介一图示意 简介 LINQPad 是一款学习 LINQ,优化 SQL 的好助手. 它的一大特点是内置了新版<C# in a Nutshell>的全部 LINQ 示例,不管是配合原书进行练 ...