资讯专栏INFORMATION COLUMN

webpack hot-module-replacement 原理&踩坑

elva / 976人阅读

摘要:原理踩坑起因最近在做框架的热更新,记录一下的原理和小坑。文件系统接收更改并通知。运行时通过请求这些更新。类似的问题还有很多,事件绑定手动插入并且没有销毁的定时器等,记得把这些副作用一起干掉。参考官方文档原理分析与实现

webpack hot-module-replacement 原理&踩坑 起因

最近在做san框架的热更新,记录一下webpack HMR的原理和小坑。

什么是HMR?

热更新是webpack的一个特性,通过无刷新实现代码更新。

在HMR之前,大多数开发体验是live reload,保存后自动刷新浏览器,已经是比刀耕火种的年代强很多了,但是自从某天在油管上看到dan神的redux时间穿梭,瞬间被惊艳到(当然,HMR已经是这之前很久就出现了)。

HMR大幅提高了开发体验,只更新变更内容,调整样式迅速,避免了大部分的网络请求、浏览器重新渲染、app解析编译显示,让我们来看下他是如何做到的。

hmr基本法

概念

compile: webpack的核心。js编译、拆包。
hmr-server: 建立连接并完成模块热更新的推送。
bundle-server: 静态服务器。
bundle.js: client端。
hmr-runtime: 注入到bundle.js中的代码。

更新流程

热更新开启后,当webpack打包时,会向client端注入一段HMR runtime代码,同时server端(webpack-dev-server或是webpack-hot-middware)启动了一个HMR服务器,它通过websocket和注入的runtime进行通信。

当webpack检测到文件修改后,会重新构建,并通过ws向client端发送更新消息,浏览器通过jsonp拉取更新过的模块,回调触发模块热更新逻辑。

1.修改了一个或多个文件。
2.文件系统接收更改并通知Webpack。
3.Webpack重新编译构建一个或多个模块,并通知HMR服务器进行了更新。
4.HMR Server使用websockets通知HMR Runtime需要更新。HMR运行时通过HTTP请求这些更新(jsonp)。
5.HMR运行时替换更新中的模块,如果确定这些模块无法更新,则触发整个页面刷新(这是个大坑。。)。

触发页面刷新
// webpack/hot/dev-server
if(module.hot) {
    var lastHash;
    //__webpack_hash__是每次编译的hash值是全局的
    //Only available with the HotModuleReplacementPlugin or the ExtendedAPIPlugin
    var upToDate = function upToDate() {
        return lastHash.indexOf(__webpack_hash__) >= 0;
    };
    var check = function check() {
   // check([autoApply], callback: (err: Error, outdatedModules: Module[]) => void
   // If autoApply is truthy the callback will be called with all modules that were disposed. apply() is automatically called with autoApply as options parameter.(传入哪些代码已经被更新的模块)
   //If autoApply is not set the callback will be called with all modules that will be disposed on apply(). (不是true那么传入的是哪些需要被apply处理的模块)
        module.hot.check(true).then(function(updatedModules) {
            //检查所有要更新的模块,如果没有模块要更新那么回调函数就是null
            if(!updatedModules) {
                console.warn("[HMR] Cannot find update. Need to do a full reload!");
                console.warn("[HMR] (Probably because of restarting the webpack-dev-server)");
                window.location.reload();
                return;
            }
            //如果还有更新
            if(!upToDate()) {
                check();
            }
            require("./log-apply-result")(updatedModules, updatedModules);
            //已经被更新的模块都是updatedModules
            if(upToDate()) {
                console.log("[HMR] App is up to date.");
            }

        }).catch(function(err) {
            var status = module.hot.status();
            //如果报错直接全局reload
            if(["abort", "fail"].indexOf(status) >= 0) {
                console.warn("[HMR] Cannot apply update. Need to do a full reload!");
                console.warn("[HMR] " + err.stack || err.message);
                window.location.reload();
            } else {
                console.warn("[HMR] Update failed: " + err.stack || err.message);
            }
        });
    };
    var hotEmitter = require("./emitter");
    //获取MyEmitter对象
    hotEmitter.on("webpackHotUpdate", function(currentHash) {
        lastHash = currentHash;
        if(!upToDate() && module.hot.status() === "idle") {
            //调用module.hot.status方法获取状态
            console.log("[HMR] Checking for updates on the server...");
            check();
        }
    });
    console.log("[HMR] Waiting for update signal from WDS...");
} else {
    throw new Error("[HMR] Hot Module Replacement is disabled.");
}

正常情况下,hmr只会更新模块,不会触发页面刷新。

但是当bundle.js中的代码抛出异常时,如果开发者没有手动接收并处理,这个错误会冒泡到webpack-hmr-runtime中。

runtime接收error后会console.log一些信息并立即刷新,通常情况下是没办法看到那些log的,因为太快了。

// vue-hot-reload-api.js
// 不得不说,这个一开始确实没搞懂是为啥要包一层
// 自己实现的时候才知道,当有error弹出时
// 如果不手动这样接住error,webpack会接到然后立即location.reload()
// 根本来不及看reload之前给出的提示
// 所以要手动处理下error
function tryWrap (fn) {
  return function (id, arg) {
    try { fn(id, arg) } catch (e) {
      console.error(e)
      console.warn("Something went wrong during Vue component hot-reload. Full reload required.")
    }
  }
}

所以开发者需要自定义一个类似的高阶函数手动处理下错误,防止看不到错误信息而刷新。

副作用

模块的热更新是好事,但是老模块仍然有可能在client端留下了痕迹。试想一个组件被热更新后,如果不处理之前的组件,那么新老两个组件都会在浏览器中出现。

所以别忘了在module.hot.accept中清除掉旧的组件。
类似的问题还有很多,事件绑定、手动插入并且没有销毁的dom、定时器等,记得把这些副作用一起干掉。

如果做不到的话,老老实实刷新你的浏览器吧。

参考

webpack官方文档


Understanding Webpack HMR

webpack-dev-server原理分析与HMR实现

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84825.html

相关文章

  • Next.js踩坑入门系列(二)— 添加Antd && CSS

    摘要:踩坑入门系列一二添加三目录重构再谈路由陆续更新个人对于脚手架的有一种执念,如果搭建出来就是一个首页标签跳转,实在不是我这个处女座的风格,因此第二步我就想引用框架,相信很多使用的开发者用的也都是这个框架吧。 Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 陆续更新... 个人对于脚手架的UI有一种执...

    lifesimple 评论0 收藏0
  • 从基础到实战 手摸手带你掌握新版Webpack4.0详解 一起读文档

    摘要:构建构建就是把源代码转换成发布到线上的可执行代码,包括如下内容。自动刷新监听本地源代码的变化,自动重新构建刷新浏览器。自动发布更新完代码后,自动构建出线上发布代码并传输给发布系统。将文件放入到项目中,在中新建一个放字体图标的文件夹。 项目地址 github.com/wudiufo/Web… 知识点概览: Loader,HMR ,Create React App, Caching, Plug...

    王军 评论0 收藏0
  • 数人云|关于Docker Swarm&K8S,几大要素免踩坑

    摘要:结论得到了开发者社区的广泛认可,尽管它的安装过程非常艰难,之所以受到欢迎的原因很大程度取决于它提供的灵活性,以及良好的谷歌背景,而有一个小型的社区,增长略微缓慢。 数人云之前分享了《聊聊调度框架,K8S、Mesos、Swarm 一个都不能少》那么你是否仍在Docker和Kubernetes选择上陷入了困扰?所以不要担心,因为这也是很多人的苦恼,这两者都是非常优秀的容器服务,至于那种更好...

    Rainie 评论0 收藏0
  • Vue-hot-reload-api 源码解析

    摘要:源码解析起因最近在搞框架的热加载方案,自然是少不了向成熟的框架学习偷窥。这将销毁并重建整个组件包括子组件。通过使用说明可以看出,暴露的接口还是很清晰的,下面来看下具体源码实现。 Vue-hot-reload-api 源码解析 起因 最近在搞san框架的热加载方案,自然是少不了向成熟的框架学习(偷窥ing)。热加载方案基本也只是主流框架在做,且做的比较成熟,大部分应用开发者并不会接触到这...

    DobbyKim 评论0 收藏0

发表评论

0条评论

elva

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<