webpack热更新原理

些许
283 阅读10分钟

HMR是什么

  HMR即Hot Module Replacement是指当你对代码修改并保存后，webpack将会对代码进行重新打包，并将改动的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块，去实现局部更新页面而非整体刷新页面。

使用场景：

HMR应用示例.png
如上图所示，一个注册页面包含用户名、密码、邮箱三个必填输入框，以及一个注册按钮，当你在调试邮箱模块改动了代码时，没做任何处理情况下是会刷新整个页面，频繁的改动代码会浪费你大量时间去重新填写内容。预期是保留用户名、密码的输入内容，而只替换邮箱这一模块。这一诉求就需要webpack-dev-server的热模块更新功能。
相对于live reload整体刷新页面的方案，HMR的优点在于可以保存应用的状态，提高开发效率。

配置使用HMR

首先用webpack搭建项目

  • 初始化项目并导入依赖
mkdir webpack-hmr && cd webpack-hmr
npm i -y
npm i -S webpack webpack-cli webpack-dev-server html-webpack-plugin
  • 配置webpack.config.js
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development', // 开发模式不压缩代码
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js',
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: '9999',
    open: true,
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
};
  • 新建src/index.html模本文件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Webpack Hot Module Replacement</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
  • 新建src/index.js编写简单逻辑
const root = document.getElementById('root');
const input = document.createElement('input');
input.placeholder = '请输入手机号';
document.body.appendChild(input);

function render() {
  root.innerHTML = require('./content');
}

render();
  • 新建src/content.js导出渲染的字符
const html = 'Hello Webpack Hot Module Replacement!';
module.exports = html;
  • 配置package.json里的命令
"scripts": {
    "dev": "webpack serve",
    "build": "webpack"
  },
  • 运行npm run dev启动项目npm run build打包项目到dist目录

解析webpack打包后的文件内容

  • 看下dist/index.html文件
<!-- ... -->
<div id="root"></div>
<script type="text/javascript" src="main.js"></script></body>
<!-- ... -->

使用html-webpack-plugin插件将入口文件及其依赖通过script标签引入

  • 再简单看下dist/main.js内容去掉注释和无关内容后的代码
(function (modules) { // webpackBootstrap
  // ...
})
({
  "./src/content.js":
    (function(module, exports) {
eval("const html = 'Hot Module Replacement!';\nmodule.exports = html;\n\n\n//# sourceURL=webpack:///./src/content.js?");
}),
  "./src/index.js": (function(module, exports, __webpack_require__) {
eval("// import './client.js';\n\nconst root = document.getElementById('root');\nconst input = document.createElement('input');\ninput.placeholder = '请输入手机号';\ndocument.body.appendChild(input);\n\nfunction render() {\n  root.innerHTML = __webpack_require__(/*! ./content */ "./src/content.js");\n}\n\nrender();\n\nif (true) {\n  module.hot.accept([/*! ./content.js */ "./src/content.js"], () => {\n    render();\n  });\n}\n\n\n//# sourceURL=webpack:///./src/index.js?");
 })
});

  webpack打包后会产出一个自执行函数，其参数为一个对象

"./src/content.js": (function (module, exports) {
  eval("...")
}

  键为入口文件或依赖文件相对于根目录的相对路径，值则是一个函数，其中使用eval执行文件的内容字符。

  • 再进入自执行函数体内，可以看到webpack自己实现了一套commonjs规范
(function (modules) {
  // modules就是一个数组，元素就是一个个函数体，就是我们声明的模块
  // 模块缓存
  var installedModules = {};
  function __webpack_require__(moduleId) {
    // 判断是否有缓存
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 没有缓存则创建一个模块对象并将其放入缓存
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false, // 是否已加载
      exports: {}
    };
    // 执行模块函数
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    // 将状态置为已加载
    module.l = true;
    // 返回模块对象
    return module.exports;
  }
  // ...
  // 加载入口文件
  return __webpack_require__(__webpack_require__.s = "./src/index.js");
})

  整个函数里声明了一个变量installedModules 和函数__webpack_require__，并在函数上添加了一个m,c,p属性，m属性保存的是传入的模块数组，c属性保存的是installedModules变量，P是一个空字符串。最后执行__webpack_require__函数，参数为零，并将其执行结果返回。
大家如果对commonjs感兴趣可以看下阮一峰老师的博客commonjs规范，webpack打包后的代码我们先简单看一下，后边会用到。

  没有添加HMR功能时我们修改content.js点击保存的时候，文件重新编译打包后，页面会整个刷新，接下来我们加入HRM后看下效果。

配置HMR

webpack.config.js配置：

devServer: {
   hot: true
}

src/index.js配置：

if (module.hot) {
  module.hot.accept(['./content.js'], () => {
    render();
  })
}

  当更改./content.js的内容并保存时，可以看到页面没有刷新，但是内容已经被替换了。这对提高开发效率意义重大。接下来将一层层剖开它，认识它的实现原理。

HMR原理

HRM流程图.png
如上图所示，右侧Server端使用webpack-dev-server去启动本地服务，内部实现主要使用了webpack、express、websocket。

  • 使用express启动本地服务

  • 服务端和客户端使用websocket实现长连接

  • webpack监听源文件的变化，即当开发者保存文件时触发webpack的重新编译。

    • 每次编译都会生成hash值、已改动模块的json文件、已改动模块代码的js文件
    • 编译完成后通过socket向客户端推送当前编译的hash值

  • 客户端的websocket监听到有文件改动推送过来的hash值，会和上一次对比

    • 一致则走缓存
    • 不一致则通过ajax和jsonp向服务端获取最新资源

  • 使用内存文件系统去替换有修改的内容实现局部刷新

上图先看个大概，下面将从服务端和客户端两个方面进行详细分析：

debug服务端源码

先看流程图右边部分，暂时忽略左边，大家有兴趣的话可以自己debug到对应的位置，看下数据的具体变化。

  1. 启动webpack-dev-server服务器，源代码地址@webpack-dev-server/webpack-dev-server.js#L173

  2. 创建webpack实例，源代码地址@webpack-dev-server/webpack-dev-server.js#L89

  3. 创建Server服务器，源代码地址@webpack-dev-server/webpack-dev-server.js#L107

  4. 添加webpack的done事件回调，源代码地址@webpack-dev-server/Server.js#L122

  5. 编译完成向客户端发送消息，源代码地址@webpack-dev-server/Server.js#L184

  6. 创建express应用app，源代码地址@webpack-dev-server/Server.js#L123

  7. 设置文件系统为内存文件系统，源代码地址@webpack-dev-middleware/fs.js#L115

  8. 添加webpack-dev-middleware中间件，源代码地址@webpack-dev-server/Server.js#L125

    1. 中间件负责返回生成的文件，源代码地址@webpack-dev-middleware/middleware.js#L20

  9. 启动webpack编译，源代码地址@webpack-dev-middleware/index.js#L51

  10. 创建http服务器并启动服务，源代码地址@webpack-dev-server/Server.js#L135

  11. 使用sockjs在浏览器端和服务端之间建立一个 websocket 长连接，源代码地址@webpack-dev-server/Server.js#L745

  12. 创建socket服务器，源代码地址@webpack-dev-server/SockJSServer.js#L34

服务端简易实现

根据调试的服务端源码，我们简单抽象实现一下服务端功能：

  • 首先导入相关依赖
const path = require('path'); // 解析文件路径
const express = require('express'); // 启动本地服务
const mime = require('mime'); // 获取文件类型 实现一个静态服务器
const Webpack = require('webpack'); // 读取配置文件进行打包
const MemoryFileSystem = require('memory-fs'); // 使用内存文件系统更快，文件生成在内存中而非真实文件
const config = require('./webpack.config'); // webpack配置文件
  • 创建webpack实例
const compiler = webpack(config)
  • 创建本地服务Server(通过express来启动本地服务)
class Server {
  constructor(compiler) {
    this.compiler = compiler;

    // 创建express应用
    let app = new express();
    this.server = require('http').createServer(app);
  }

  listen(port) {
    this.server.listen(port, () => {
      console.log(`服务器启动port:${port}`);
    });
  }
}

constructor(compiler) {
    let sockets = []
    let lasthash
    compiler.hooks.done.tap('webpack-dev-server', (stats) => {
      lasthash = stats.hash
      // 每当新一个编译完成后都会向客户端发送消息
      sockets.forEach(socket => {
        socket.emit('hash', stats.hash) // 先向客户端发送最新的hash值
        socket.emit('ok') // 再向客户端发送一个ok
      })
    })
  }

  webpack编译后提供提供了一系列钩子函数，以供插件能访问到它的各个生命周期节点，并对其打包内容做修改。compiler.hooks.done则是插件能修改其内容的最后一个节点。
编译完成通过socket向客户端发送消息，推送每次编译产生的hash。另外如果是热更新的话，还会产出二个补丁文件，里面描述了从上一次结果到这一次结果都有哪些chunk和模块发生了变化。
使用数组去存放当打开了多个Tab时每个Tab的socket实例(let sockets = [])。

  • 设置文件系统为内存文件系统（使用MemoryFileSystem将compiler打包的文件放到内存中）
let fs = new MemoryFileSystem();
  • 添加webpack-dev-middleware中间件
function middleware(req, res, next) {
    if (req.url === '/favicon.ico') {
      return res.sendStatus(404);
    }

    if (req.url === '/' || req.url === '') {
      req.url = '/index.html';
    }
	
    // /index.html   dist/index.html
    let filename = path.join(config.output.path, req.url.slice(1));
    let stat = fs.statSync(filename);
    if (stat.isFile()) { // 判断是否存在这个文件,如果在的话直接把这个读出来发给浏览器
      let content = fs.readFileSync(filename);
      let contentType = mime.getType(filename);
      res.setHeader('Content-Type', contentType);
      res.statusCode = res.statusCode || 200;
      res.send(content);
    } else {
      return res.sendStatus(404);
    }
  }
  app.use(middleware);

使用expres启动了本地开发服务后，使用中间件去为其构造一个静态服务器，并使用了内存文件系统，使读取文件后存放到内存中，提高读写效率，最终返回生成的文件。

  • 以监控(watch)模式启动webpack
compiler.watch({}, (err, stats) => {
  console.log(`再次编译成功->${stats}`);
});
  • 使用sockjs在浏览器端和服务端之间建立一个websocket长连接
constructor(compiler) {
    // ...
    this.server = require('http').createServer(app)
    let io = require('socket.io')(this.server)
    io.on('connection', (socket) => {
      sockets.push(socket)
      socket.emit('hash', lastHash)
      socket.emit('ok')
    })
  }

  启动一个websocket服务器，然后等待连接成功之后存进sockets池,当有文件改动，webpack重新编译时，向客户端推送hash和ok两个事件。

调试服务端代码：

node dev-server.js

使用我们自己编译的dev-server.js启动服务，可看到页面可以正常展示，但还没有实现热更新，下面开始调试客户端源码。

debug客户端源码

HRM流程图.png
现在我们只关注上边流程图的左边部分，debug客户端源码分析其详细思路：

  1. webpack-dev-server/client端会监听到此hash消息，源代码地址@webpack-dev-server/index.js#L54
  2. 客户端收到ok的消息后会执行reloadApp方法进行更新，源代码地址index.js#L101
  3. 在reloadApp中会进行判断，是否支持热更新，如果支持的话派发webpackHotUpdate事件，如果不支持则直接刷新浏览器，源代码地址reloadApp.js#L7
  4. 在webpack/hot/dev-server.js会监听webpackHotUpdate事件，源代码地址dev-server.js#L55
  5. 在check方法里会调用module.hot.check方法，源代码地址dev-server.js#L13
  6. HotModuleReplacement.runtime请求Manifest，源代码地址HotModuleReplacement.runtime.js#L180
  7. 它通过调用 JsonpMainTemplate.runtime的hotDownloadManifest方法，源代码地址JsonpMainTemplate.runtime.js#L23
  8. 调用JsonpMainTemplate.runtime的hotDownloadUpdateChunk方法通过JSONP请求获取到最新的模块代码，源代码地址JsonpMainTemplate.runtime.js#L14
  9. 补丁JS取回来后会调用JsonpMainTemplate.runtime.js的webpackHotUpdate方法，源代码地址JsonpMainTemplate.runtime.js#L8
  10. 然后会调用HotModuleReplacement.runtime.js的hotAddUpdateChunk方法动态更新模块代码，源代码地址HotModuleReplacement.runtime.js#L222
  11. 然后调用hotApply方法进行热更新，源代码地址HotModuleReplacement.runtime.js#L257、HotModuleReplacement.runtime.js#L278

客户端简易实现

根据调试的z客户端源码的几个关键点，我们简单抽象实现一下客户端功能：

  • 首先需要在src/index.html中引入socket.io（webpack-dev-server/client端会通过websocket监听到hash消息）
<script src="/socket.io/socket.io.js"></script>

  接下来创建src/client.js，连接socket并接受消息,将服务端webpack每次编译所产生hash进行缓存

let socket = io('/');

socket.on('connect', () => {
  console.log('客户端连接成功');
});

let hotCurrentHash; // 上一次 hash值
let currentHash; // 本次的hash值
socket.on('hash', (hash) => {
  currentHash = hash;
});
  • 客户端收到ok的消息后会执行reloadApp方法进行更新
socket.on('ok', () => {
  reloadApp(true);
});
  • reloadApp中判断是否支持热更新（支持的话派发webpackHotUpdate事件，如果不支持则直接刷新浏览器）
// 当收到ok事件后，会重新刷新app
function reloadApp(hot) {
  if (hot) {
    // 如果hot为true 走热更新的逻辑
    hotEmitter.emit('webpackHotUpdate');
  } else {
    // 如果不支持热更新，则直接重新加载
    window.location.reload();
  }
}
  • 在webpack/hot/dev-server.js监听webpackHotUpdate事件
const EventEmitter = require('events');

let hotEmitter = new Emitter();
hotEmitter.on('webpackHotUpdate', () => {
  debugger;
  if (!hotCurrentHash || hotCurrentHash == currentHash) {
    return (hotCurrentHash = currentHash);
  }
  hotCheck();
});
  • 在check方法里调用module.hot.check方法
function hotCheck() {
  hotDownloadManifest().then((update) => {
    let chunkIds = Object.keys(update.c);
    chunkIds.forEach((chunkId) => {
      hotDownloadUpdateChunk(chunkId);
    });
  });
}

  上面也提到过webpack每次编译都会产生hash值、已改动模块的json文件、已改动模块代码的js文件，此时先使用ajax请求Manifest即服务器这一次编译相对于上一次编译改变了哪些module和chunk。然后再通过jsonp获取这些已改动的module和chunk的代码。

  • 调用hotDownloadManifest方法
function hotDownloadManifest() {
  return new Promise(function (resolve) {
    let request = new XMLHttpRequest();
    //hot-update.json文件里存放着从上一次编译到这一次编译 取到差异
    let requestPath = '/' + hotCurrentHash + '.hot-update.json';
    request.open('GET', requestPath, true);
    request.onreadystatechange = function () {
      if (request.readyState === 4) {
        let update = JSON.parse(request.responseText);
        resolve(update);
      }
    };
    request.send();
  });
}
  • 调用hotDownloadUpdateChunk方法通过JSONP请求获取到最新的模块代码
function hotDownloadUpdateChunk(chunkId) {
  let script = document.createElement('script');
  script.charset = 'utf-8';
  // /main.xxxx.hot-update.js
  script.src = '/' + chunkId + '.' + hotCurrentHash + '.hot-update.js';
  document.head.appendChild(script);
}

  这里解释下为什么使用jsonp获取而不直接利用socket获取最新代码，主要是因为jsonp获取的代码可以直接执行。

  • 当客户端把最新的代码拉到浏览之后，调用webpackHotUpdate方法
window.webpackHotUpdate = function (chunkId, moreModules) {
  // 循环新拉来的模块
  for (let moduleId in moreModules) {
    // 从模块缓存中取到老的模块定义
    let oldModule = __webpack_require__.c[moduleId];
    // parents哪些模块引用这个模块 children这个模块引用了哪些模块
    // parents=['./src/index.js']
    let { parents, children } = oldModule;
    // 更新缓存为最新代码 缓存进行更新
    let module = (__webpack_require__.c[moduleId] = {
      i: moduleId,
      l: false,
      exports: {},
      parents,
      children,
      hot: window.hotCreateModule(moduleId),
    });
    moreModules[moduleId].call(
      module.exports,
      module,
      module.exports,
      __webpack_require__
    );
    module.l = true; // 状态变为加载就是给module.exports 赋值了
    parents.forEach((parent) => {
      debugger; // parents=['./src/index.js']
      let parentModule = __webpack_require__.c[parent];
      // hot._acceptedDependencies={'./src/content.js': render}
      parentModule &&
        parentModule.hot &&
        parentModule.hot._acceptedDependencies[moduleId] &&
        parentModule.hot._acceptedDependencies[moduleId]();
    });
    hotCurrentHash = currentHash;
  }
};
  • hotCreateModule的实现
window.hotCreateModule = function () {
  let hot = {
    _acceptedDependencies: {},
    dispose() {
      // 销毁老的元素
    },
    accept: function (deps, callback) {
      for (let i = 0; i < deps.length; i++) {
        // hot._acceptedDependencies={'./title': render}
        hot._acceptedDependencies[deps[i]] = callback
      }
    }
  }
  return hot
}

  实现我们可以在业务代码中定义需要热更新的模块以及回调函数，将其存放在hot._acceptedDependencies中。

parents.forEach((parent) => {
      debugger; // parents=['./src/index.js']
      let parentModule = __webpack_require__.c[parent];
      // hot._acceptedDependencies={'./src/content.js': render}
      parentModule &&
        parentModule.hot &&
        parentModule.hot._acceptedDependencies[moduleId] &&
        parentModule.hot._acceptedDependencies[moduleId]();
    });

  然后在webpackHotUpdate中进行调用

  • 最后调用hotApply方法进行热更新

总结

  本文主要以webpack4为例，分析了一下webpack的HMR原理，介绍了在开发中可以带来什么样的体验提升，并粗略的实现了客户端和服务端的功能，大家有兴趣了可以看下webpack5相比webpack4有哪些提升和修改。

引用

模块热替换 - webpack官网

avatar
文章
阅读
粉丝