current position:Home>Webpack learning notes series 08-hmr hot update

Webpack learning notes series 08-hmr hot update

2022-06-24 08:16:32CS Xiaoyao Sword Fairy

webpack Learning notes series 08-HMR Hot update

Write By CS Xiaoyao sword immortal My home page : GitHub: Email: [email protected] QQ: 1724338257

1. HMR Concept

HMR - Hot Module Replacement, When webpack Turn on HMR After function , When the code changes webpack It's going to be repackaged , And send the modified code to the browser , Browsers replace old code , Ensure that the page state is not lost , Local update without refreshing the entire page .

When a module code changes , You need to execute the corresponding update event , If the current module cannot handle HMR, Will follow webpack Of module The tree bubbled at the parent dependency node , If up to the root node ( namely entry Entrance file ) Can't handle update event , It will refresh the page , For most front-end frameworks , Such as Vue etc. , There will be matching HMR Tools , Usually by loader / babel plug-in unit / style-loader To achieve .

2. Hot update process


2.1 webpack-dev-server & contentBase

Start a Express Server, Integrate webpack-dev-middleware middleware 、WebSocket A long connection 、 proxy、 Static resource server and other functions .

webpack-dev-server Of contentBase Directory folder for temporary static resource server , start-up server after , It can be done by url visit , But it won't fall into the market ( Storage hard disk ), And this file and webpack The packaged paths are different .

stay webpack-dev-middleware in , Used memory-fs Memory file system module , Replace Webpack Of Compiler Object to package the result file module outputFileSystem

// webpack-dev-middleware/lib/fs.js
const MemoryFileSystem = require('memory-fs');
module.exports = {
    setFs(context, compiler) {
        // ...
        fileSystem = new MemoryFileSystem();
        compiler.outputFileSystem = fileSystem;

2.2 watch

There are three in the figure above watch:

step1 Medium watch Monitor file changes of dependent modules , That is, code modification triggers recompilation (HMR);

step2 yes webpack-dev-middleware adopt webpack Of Compiler The hook listens to the compilation process and passes ws Push compiled hash Value and tell the browser that the current page code is invalid State of , You need to update ;

step3 Medium watch It's settings devServer.watchContentBase=true Time monitor contentBase Document changes , Trigger notification browser refresh ( Not HMR, because contentBase Non packaged dependent files ).

2.3 HotModuleReplacementPlugin plug-in unit

stay webpack.config.js Add plug-ins to HotModuleReplacementPlugin A list of difference files between two compilations will be generated , namely manifest JSON file .

  • manifest JSON file : The file name format is [hash].hot-update.json, Generated by plug-ins , contain update File list
  • update file : The file name format is [id].[hash].hot-update.js, They are listed in manifest JSON In file , The content is HMR Differentiated execution code for

The plug-in will go through Compilation.mainTemplate Of bootstrap Hooks inject... According to different environments runtime.js, In a browser environment , What is injected is lib/web/JsonpMainTemplate.runtime.js , The runtime.js There are two key functions for updating in :

  • hotDownloadManifest: launch Ajax request mainifest JSON file
  • hotDownloadUpdateChunk: establish JSONP request update file

2.4 WebSocket & hash

webpack-dev-server utilize sockjs In browser and Server Create a WebSocket A long connection , The communication content is mainly to transfer the files of the compilation module hash Value information .

Browser gets new hash after , Will start with a ajax The request for manifest file [hash].hot-update.json Content , Notice again HMR Of Runtime Initiate by listing JSONP request , Get the difference file compiled twice [id].[hash].hot-update.js, Insert to page head Labeled script In the implementation of , Complete the final update .


Be careful : there hash The value is the execution time Compilation Previously determined hash value , So get manifest And update the file with the returned after the last update hash value .

3. HMR principle —— Compile variance calculation method


Pictured above is an example , Right module module(4) / module(9) change ,manifest JSON Will be updated to its dependent 4 Related chunk:

  • chunk(3): module(9) Introduce new dependencies after modification module(12), therefore chunk(3) Generation contains module(9) and module(12) Of update file ;
  • chunk(4): module(4) Remove after modification chunk(4) Dependence , And chunk(4) Medium module(10) and module(11) Module is not used by other modules , So delete chunk(4) Module in module(10) / module(11);
  • chunk(1): chunk(1) rely on module(4), So it generates module(4) Of update file ;
  • entry(0): Finally, the entry file update depends on the new chunk File list ,chunks=1,3,4

copyright notice
author[CS Xiaoyao Sword Fairy],Please bring the original link to reprint, thank you.

Random recommended