This article introduces you to Angular development practice (2): HRM operating mechanism. Interested friends can take a look at
is enabled in the angular-start project The Hot Module Replacement (HMR - Hot Module Replacement)
function has been installed. For how to enable HRM
in angular-cli
, please view the HRM configuration
So what is HMR
?
HMR
is a function provided by webpack
, angular-cli
uses it, it will replace and add during the running process of the application Or remove the module without reloading the entire page. Mainly through the following methods, to significantly speed up development:
Preserve application state that is lost when the page is completely reloaded
Update only changes to save valuable development time
Adjust styles faster - almost equivalent to changing styles in the browser debugger
Let’s take a look at the specific effects first:
1. Start the angular-start
project. In the console you can see that HRM
has been enabled. Message:
##2. Then you can see through the browser console that all resources are requested for the first load:
#3. At this time, modify a code and save it. The browser will automatically display the modified effect without refreshing. Look at the browser console and only request Newly modified js:
Let’s look at it from some different angles to understand how
HMR works…
swap in and out) the module in the application through the following steps:
compiler) needs to issue
update to allow updating the previous version to the new version.
update consists of two parts:
manifest (JSON)
chunk (JavaScript)
including the new compiled hash
and all pending Update chunk
directory. Each update chunk
contains code corresponding to all updated modules for this chunk
(or a flag
to indicate that this module is to be removed). The compiler ensures that the module
and chunk ID
remain consistent between these builds. These ID
are usually stored in memory (for example, when using webpack-dev-server
), but it is also possible to store them in a JSON
file. In modules
is an optional feature and will only affect modules containing HMR
code. For example, add a patch to the style
style through style-loader
. In order to run additional patches, style-loader
implements the HMR
interface; when it receives an update via HMR
, it replaces the old style with the new one. Similarly, when implementing the
interface in a module, you can describe what happens when the module is updated. In most cases, however, there is no need to force writing HMR
code in every module. If a module does not have a HMR
handler, updates will bubble up. This means that a simple handler function can update the entire module tree(complete module tree)
. If a single module in this module tree is updated, the entire set of dependent modules will be reloaded. For details on the module.hot interface, please check out the HMR API page.
In HMR Runtime
, additional code is sent to parents
and children
for tracking module. In terms of management, runtime
supports two methods check
and apply
.
Send a HTTP
request to update the manifest
. If the request fails, no updates are available. If the request is successful, the chunk
to be updated will be compared with the currently loaded chunk
. For each loaded chunk
, the corresponding chunk
to be updated will be downloaded. When all pending updates chunk
have been downloaded, they will be ready to switch to the ready
state. <p><code>apply
The method marks all updated modules as invalid. For each invalid module, there needs to be an update handler in the module or in its parent modules. Otherwise, the invalid tag bubbles up and invalidates the parent as well. Each bubbling continues until it reaches the application entry point, or the module with the update handler, whichever comes first. If it starts bubbling from the entry point, the process fails.
Afterwards, all invalid modules are processed (via the dispose
handler function) and unloaded. Then update the current hash
and call all accept
processing functions. runtime
Switch back to idle state and everything continues as usual.
http://www.css88.com/doc/webp...
Related recommendations:
Angular Development Practice (1): Environment Preparation and Framework Construction
The above is the detailed content of Angular development practice (2): HRM operating mechanism. For more information, please follow other related articles on the PHP Chinese website!