이 글에서는 Angular 개발 실습(2): HRM 운영 메커니즘을 소개합니다. 관심 있는 친구들은 한 번 살펴보세요
Angular-Start 프로젝트에서는 모듈 핫 교체(HMR - Hot Module 교체)
기능, angular-cli
에서 HRM
을 활성화하는 방법은 HRM 구성을 확인하세요模块热替换(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页面。
对于模块系统的runtime
,附加的代码被发送到parents
和children
跟踪模块。在管理方面,runtime
支持两个方法check
和apply
。
check
发送HTTP
请求来更新manifest
。如果请求失败,说明没有可用更新。如果请求成功,待更新chunk
会和当前加载过的chunk
进行比较。对每个加载过的chunk
,会下载相对应的待更新chunk
。当所有待更新chunk
完成下载,就会准备切换到ready
HMR
가 무엇인가요? 🎜🎜HMR
은 angular-cli
에서 사용되는 webpack
에서 제공하는 기능으로, 다시 로드하지 않고도 모듈을 교체, 추가, 제거할 수 있습니다. 전체 페이지. 주로 다음 방법을 통해 개발 속도를 크게 높입니다. 🎜angular-start
프로젝트를 시작하면 콘솔에서 HRM
이 완료되었다는 메시지를 볼 수 있습니다. 활성화됨: 🎜🎜🎜🎜2 그런 다음 브라우저 콘솔을 통해 첫 번째 로드에 모든 리소스가 요청되는 것을 확인할 수 있습니다. 🎜🎜🎜🎜3. 이때 코드를 수정하여 저장합니다. 브라우저는 새로 고침 없이 자동으로 수정된 효과를 표시합니다. 그러면 살펴보세요. 브라우저 제어에서 대만은 새로 수정된 js만 요청했습니다: 🎜🎜🎜🎜HMR
의 작동 방식을 이해하기 위해 여러 각도에서 살펴보겠습니다...🎜🎜앱에서🎜🎜다음 단계를 따르면 됩니다. 애플리케이션의 모듈을 교체하고 교체하세요(swap in and out
): 🎜컴파일러
)는 update
를 실행해야 합니다. 이전 버전을 새 버전으로 업데이트할 수 있습니다. 업데이트
는 두 부분으로 구성됩니다. 🎜매니페스트(JSON)
🎜해시
및 모든 를 포함하여 하나 이상의 업데이트된 <code>청크(JavaScript)
🎜
manifest
>청크 디렉토리가 업데이트됩니다. 각 업데이트 청크
에는 이 청크
(또는 이 모듈이 제거될 것임을 나타내는 플래그
) 코드에 해당하는 모든 업데이트 모듈이 포함되어 있습니다. 🎜🎜컴파일러는 이러한 빌드 간에 모듈 ID
및 청크 ID
가 일관되도록 보장합니다. 일반적으로 이러한 ID
는 메모리에 저장되지만(예: webpack-dev-server
사용 시) JSON
에 저장할 수도 있습니다. 코드> 파일에 있습니다. 🎜🎜모듈 내🎜🎜HMR
는 선택 사항 기능이며 HMR
코드가 포함된 모듈에만 영향을 미칩니다. 예를 들어 style-loader
를 통해 style
스타일에 패치를 추가합니다. 추가 패치를 실행하기 위해 style-loader
는 HMR
를 통해 업데이트를 받으면 이전 스타일을 대체합니다. 새로운 스타일로. 🎜🎜마찬가지로 HMR
인터페이스를 모듈에 구현할 때 모듈이 업데이트되면 어떤 일이 발생하는지 설명할 수 있습니다. 그러나 대부분의 경우 모든 모듈에 HMR
코드를 강제로 작성할 필요는 없습니다. 모듈에 HMR
핸들러가 없으면 업데이트가 표시됩니다. 이는 간단한 핸들러 함수가 전체 모듈 트리 (완전한 모듈 트리)
를 업데이트할 수 있음을 의미합니다. 이 모듈 트리의 단일 모듈이 업데이트되면 전체 종속 모듈 세트가 다시 로드됩니다. 🎜🎜module.hot 인터페이스에 대한 자세한 내용은 HMR API 페이지를 확인하세요. 🎜🎜HMR 런타임🎜🎜모듈 시스템의 런타임
의 경우 추가 코드가 부모
및 자식
추적 모듈로 전송됩니다. 관리 측면에서 런타임
은 검사
와 적용
두 가지 방법을 지원합니다. 🎜🎜check
는 매니페스트
를 업데이트하기 위해 HTTP
요청을 보냅니다. 요청이 실패하면 업데이트를 사용할 수 없습니다. 요청이 성공하면 업데이트할 청크
가 현재 로드된 청크
와 비교됩니다. 로드된 각 청크
에 대해 업데이트할 해당 청크
가 다운로드됩니다. 업데이트할 모든 청크
가 다운로드되면 준비
상태로 전환할 준비가 된 것입니다. 🎜 apply
메소드는 업데이트된 모든 모듈을 유효하지 않은 것으로 표시합니다. 유효하지 않은 각 모듈의 경우 모듈이나 해당 상위 모듈에 업데이트 핸들러가 있어야 합니다. 그렇지 않으면 잘못된 태그가 나타나 상위 태그도 무효화됩니다. 각 버블링은 애플리케이션 진입점이나 업데이트 핸들러가 있는 모듈 중 먼저 도달할 때까지 계속됩니다. 진입점에서 버블링이 시작되면 프로세스가 실패합니다. apply
方法将所有被更新模块标记为无效。对于每个无效模块,都需要在模块中有一个更新处理函数,或者在它的父级模块们中有更新处理函数。否则,无效标记冒泡,并也使父级无效。每个冒泡继续直到到达应用程序入口起点,或者到达带有更新处理函数的模块(以最先到达为准)。如果它从入口起点开始冒泡,则此过程失败。
之后,所有无效模块都被(通过dispose
处理函数)处理和解除加载。然后更新当前hash
,并且调用所有accept
处理函数。runtime
dispose
핸들러 함수를 통해 처리되고 언로드됩니다. 그런 다음 현재 해시
를 업데이트하고 모든 accept
핸들러를 호출하세요. 런타임
은 유휴 상태로 다시 전환되고 모든 것이 평소대로 계속됩니다. 참고 기사http://www.css88.com/doc/webp...
위 내용은 Angular 개발 실습(2): HRM 운영 메커니즘의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!