likes
comments
collection
share

浅谈前端热更新(下)

作者站长头像
站长
· 阅读数 73

浅谈前端热更新(下)

前言

去年年底写过一篇《浅谈前端热更新》的文章，上一篇主要是讲了热刷新的原理，感兴趣的可以看一下。这篇文章是关于热更新的原理，因为之前年关实在太忙啦(>_<)，导致这篇文章这么晚才肝出来。接下来进入正题叭。

热更新（Hot Module Replacement）原理

前一篇文章，主要讲的是什么是热刷新、什么时候开始热刷新、如何去热刷新。本篇文章就主要围绕局部模块重载这一块讨论。局部模块重载顾名思义就是浏览器并没有进行刷新页面就发生了改变。首先我们先看一下 webpack热刷新模块的简单交互图。

浅谈前端热更新(下)

实践

接下来我们就结合流程图实践一下看看。将之前的项目修改一下，首先我们需要下载一下hot-module-replacement 这个 webpack 插件，并且使用，使用方式在文档中有这里也就不用过多赘述了。

  • 首先我们webpack初始化一个项目并引入hot-module-replacement插件，这里就使用之前的项目了。
// webpack.config.js
const HotModuleReplacementPlugin = require("webpack").HotModuleReplacementPlugin
module.exports = {
    plugins: [
        ...,
        new HotModuleReplacementPlugin()
    ],
}

由于需要使用 module.hot 上的API所以我们修改写在client的hmr代码改为webpack打包引入。

// webpack.config.js
module.exports = {
    entry: [
        ...,
        path.resolve(__dirname, "./client")
    ]
}

在 client.js 中加入以下代码

// client.js
if ("WebSocket" in window) {
  const address = "ws://localhost:3000";
  var socket = new WebSocket(address);
  socket.onopen = function () {
    console.log("[HMR] Live reload enabled."); // 建立连接
  };
  socket.onmessage = function (msg) {
    console.log("msg", msg); // 接收到msg
    if (module.hot) module.hot.check(true);
    else window.location.reload()
  };
;
} else {
    console.error("Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.");
}
  • 当监听到文件改动触发了重新编译后，向client发送了消息此时客户端执行了 module.hot.check(true)

浅谈前端热更新(下)

浅谈前端热更新(下) 此时看到控制台的 network 我们可以看到此时请求到了当前编译的 [hash].hot-update.json 文件，依据这个文件引入了 main 以及 a 的文件的 [hash].hot-update.js 文件，触发了 render 完成 Hot Module Replacement。当然在开发中我们只需要使用 webpack devServer 就可以使用热更新

浅谈前端热更新(下)

总结 

对于前端热更新这一个话题的讨论就结束啦 文章写的不足的地方，希望大家见谅。 希望通过这两篇文章能对大家的学习热更新道路有点点帮助(>_<)

转载自:https://juejin.cn/post/7067069392055435294
评论
请登录