webpack4 大纲概论-manifest(十二)
https://v4.webpack.js.org/concepts/hot-module-replacement/
Hot Module Replacement 热重载(HMR)
程序运行的时候模块部分更新,以显著提升开发速度,以下:
1,保持在全部重载的时候的应用状态
2,通过只更新更改的内容,节省开发时间
3,特别是更改css或者js的时候特别快
工作:
>APP中,以下几步允许在应用中交换模块
1,app 要求 HMR 运行时检查更新
2,runtime 同步下载更新并通知应用程序
3,app 要求 runtime 使用这些更新
4,runtime 同步应用这些更新
你可以设置 HMR 让它自动更新,或者选择手动更新
>编译中,编译器发出更新操作,从旧版本到新版本更新,以下:
1,更新清单(JSON)
2,一个或多个更新块(JS)
清单包含了要新的编译 hash,和所有耿新块的列表,编译器保证模块id和块id在构建时的一致性,它通常将这些ID存在内存中(webpack dev server),也可将它们存在JSON中
>模块中
HMR 是选择加入功能,仅影响包含 HMR 代码的模块,比如样式加载器 style-loader ,需要实现 HMR 接口在模块中,
>运行时
如果改了一个模块,那么 runtime 中的 check 方法会核对是否需要更新,加载的和更新的块进行对比,匹配的块会被下载,所有的更新操作在 runtime 中运行,当所有需要更新的部分下载好准备应用,runtime 就切换到 ready 状态;
runtime 的 apply 方法会把所有需要更新的模块标记出来,如果有更新的句柄(handler)就执行,如果没有,就会向上级冒泡直到有更新句柄的模块或者应用入口点,然后更新。
之后,所有的非法(待更新)模块被卸载,hash 更新,并且 apply 方法执行。随后 runtime 切换到 idle(闲置) 状态。
你也可以根据项目需要使用其他各种配置 HMR 的方法

浙公网安备 33010602011771号