Webpack 热更新原理
leslie1943 opened this issue · comments
Webpack 热更新原理
Webpack
的热更新又称为热替换(Hot Module Replacement
), 这个机制可以做到不刷新浏览器而将变更的模块替换掉旧的模块- 其原理如下:
- HMR的核心就是
客户端
从服务端
拉取更新后的文件, 准确的说是chunk diff
(chunk
需要更新的部分) Webpack Dev Server
(WDS 服务端
)与 浏览器(客户端)之间维护了一个Websoket
- 当
服务端
)资源(发生变化时,WDS 服务端
会向浏览器(客户端
)推送更新,并带上构建时的hash
, 让客户端与上一次资源进行对比. - 1- 当客户端对比出差异后会向
WDS
发起Ajax
请求来获取更改内容(文件列表, hash):获取列表/hash
- 2- 客户端就可以再借助这些信息继续向
WDS
发起jsonp
请求获取chunk
的增量更新:更新内容
- 后续的部分(拿到增量更新之后如何处理, 哪些状态保留, 哪些需要更新)由
HotModulePlugin
来完成.