Vite原理学习之HMR

前言

Vite是基于ESM的构建工具，预编译和按需编译机制是其在项目启动以及快速更新的核心。除了这两个机制外，还存在一个主流构建工具都存在一个机制即HMR。HMR是Hot Module Replacement的简写，意思是模块热替换，即允许在运行时更新各种模块，而无需进行完全刷新。HMR大大提高了开发阶段的更新的响应速度，避免全量更新，在提高效率的同时大大提高了开发体验。

Live Reload

在正式去学习HMR机制之前，先聊聊另外一个概念Live Reload。Live Reload表示实时重加载，实际上这个概念跟HMR很相近。HMR是在运行时更新存在改变的模块，Live Reload也是在运行时更新模块，但是它全量更新的。Live Reload和HMR都是前端工程化时代下的产物，不同于原始阶段手动刷新更改后的页面这种方式，Live Reload和HMR都实现页面的自动更新。

事物的发展总是循序渐进的，技术也是如此，从原始的手动刷新 、Live Reload机制的全量自动更新、HMR机制的局部自动更新，整个发展主要脉络是清晰的。

Vite中HMR机制

不论是否了解Vite背后原理，你应该知道其背后是基于WebSocket的，实际上目前主流构建工具的HMR的实现都是基于WebSocket的。WebSocket协议是服务器端与客户端通信的协议之一，不同于HTTP协议的半双工，WebSocket协议是全双工的，它允许客户端和服务器端可以同时通信，这服务器端可以主动向客户端发送请求。现代浏览器基于WebSocket协议实现了相关功能，提供了WebSocket对象。在Node端也有相关的WebSocket库， 例如ws等。

构建工具的核心都是在本地基于Node的http模块创建一个本地开发服务器，提供开发阶段所有资源的相关处理等工作。HMR机制是基于WebSocket的，必然也是需要客户端和服务端的。通过源码梳理，Vite中HMR机制对应的WebSocket的服务端是在预编译期间，准确的说实在创建开发服务器时创建的，而WebSocket客户端则是在按需编译期间，准确的说是在开发服务器启动之后Vite注入到HTML页面中的@vite/client文件中执行的。

WebSocket Server

在之前Vite预编译文章中，知道创建开发服务器逻辑是调用createServer方法来实现的，而其中涉及到WebSocket Server的创建逻辑如下：

 const ws = createWebSocketServer(httpServer, config, httpsOptions)

而createWebSocketServer的逻辑也比较清晰，具体逻辑如下：

export function createWebSocketServer(
  server: Server | null,
  config: ResolvedConfig,
  httpsOptions?: HttpsServerOptions
): WebSocketServer {
  let wss: WebSocket
  let httpsServer: Server | undefined = undefined

  const hmr = isObject(config.server.hmr) && config.server.hmr
  const wsServer = (hmr && hmr.server) || server

  if (wsServer) {
    wss = new WebSocket({ noServer: true })
    // 协议更改支持
    wsServer.on('upgrade', (req, socket, head) => {
      if (req.headers['sec-websocket-protocol'] === HMR_HEADER) {
        wss.handleUpgrade(req, socket as Socket, head, (ws) => {
          wss.emit('connection', ws, req)
        })
      }
    })
  } else {
  	// 创建开发服务器
    // vite dev server in middleware mode
    wss = new WebSocket(websocketServerOptions)
  }
  wss.on('connection', (socket) => {
   // 建立连接
  })
  wss.on('error', (e: Error & { code: string }) => {
    // 错误处理
  })

  return {
    on: wss.on.bind(wss),
    off: wss.off.bind(wss),
    send(payload: HMRPayload) {
    	// 相关逻辑
    },
    close() {
    	// 相关逻辑
    }
  }
}

上面的逻辑实际上总结下来就是基于开发服务器创建WebSocket Server，然后监听相关事件并返回相关实例方法。实际上Vite中是基于ws第三库来建立WebSocket Server，ws的具体使用可以查看ws使用文档。

WebSocket Client

在之前 Vite按需编译文章中，知道当请求index.html时Vite会在页面中插入@vite/client文件请求，而该文件的主要逻辑之一就是创建WebSocket客户端。

// 根据开发服务器地址使用WebSocket对象创建客户端
const socketProtocol =
  __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')

socket.addEventListener('message', async ({ data }) => {
  handleMessage(JSON.parse(data))
})

socket.addEventListener('close', async ({ wasClean }) => {
	// 相关逻辑
})

HMR运行机制

当创建了对应的WebSocket服务器和客户端之后，当页面加载之后就会建立连接。当模块被修改WebSocket服务器端就会通过WebSocket连接通知浏览器热更新，这部分逻辑是在开发服务器定义的。

Vite内部使用chokidar库来实现文件的监听，当文件被修改就会被感知从而来执行相关逻辑，具体逻辑如下：

const watcher = chokidar.watch(path.resolve(root), {
    ignored: [
      '**/node_modules/**',
      '**/.git/**',
      ...(Array.isArray(ignored) ? ignored : [ignored])
    ],
    ignoreInitial: true,
    ignorePermissionErrors: true,
    disableGlobbing: true,
    ...watchOptions
  }) as FSWatcher

watcher.on('change', async (file) => {})
watcher.on('add', (file) => {
	handleFileAddUnlink(normalizePath(file), server)
})
watcher.on('unlink', (file) => {
	handleFileAddUnlink(normalizePath(file), server, true)
})

使用chokidar创建监听器对象，然后监听change、add、unlink事件对不同动作执行不同逻辑：

• change：文件内容改变时触发
• add：新增文件时触发
• unlink：删除文件时触发

文件内容修改操作的回调处理

文件内容修改后回调处理逻辑主要有两点：

// 依赖图谱逻辑处理
moduleGraph.onFileChange(file)
// 处理更新
handleHMRUpdate(file, server)

在开发服务器启动过程中的会创建一个moduleGraph对象，该对象内部定义多个moduleMap，例如：

• urlToModuleMap
• idToModuleMap
• fileToModulesMap

在对应map对象中对保存项目中所有模块相关的图谱信息，而这个图谱内容是在模块按需编译时创建。这里暂不关心依赖图谱的具体处理逻辑。

handleHMRUpdate负责处理具体的更新逻辑，实际上该方法的主要逻辑如下几点：

• 对应配置文件的更改，会重启服务器
• 对于client目录下文件、html文件等无法热更新的，只能全部加载
• 创建HMR上下文对象，调用对应插件的handleHotUpdate方法，得到需要更新模块

所有需要更新的操作都是通过WebSocket连接发送相关类型和数据到浏览器端：

ws.send({ type: 'full-reload' })
ws.send({ type: 'update', updates })

然后由浏览器端根据对应的type类型做相关处理。相关类型有：

• full-reload
• update：该类型下还有不同的子类型，而子类型主要是跟文件类型有关，例如js-update、css-update

在客户端@vite/client文件中，对于full-reload的逻辑主要就是调用location.reload来实现整体重新加载。而对于update的处理逻辑：

• 对于JS模块更新会先构建特殊的url使用import动态请求需要更新的模块文件（?import&t=时间戳&其他参数），然后将加载好的模块以及模块依赖结果存放到队列中，然后批量更新。

文件新增和文件删除操作的回调处理

文件新增和文件删除都是调用handleFileAddUnlink方法来实现的，而该方法的逻辑主要是操作服务器对象的_globImporters属性：

// 从依赖图谱中获取新增或删除文件地址对应的相关模块
const modules = [...(server.moduleGraph.getModulesByFile(file) ?? [])]
// 删除操作
if (isUnlink && file in server._globImporters) {
	delete server._globImporters[file];
} else {
	// 新增操作
	for (const i in server._globImporters) {
    	const { module, importGlobs } = server._globImporters[i];
        for (const { base, pattern } of importGlobs) {
        	if (micromatch_1.isMatch(file, pattern) ||
            	micromatch_1.isMatch(path__default.relative(base, file), pattern)) {
            	modules.push(module);
                server.moduleGraph.onFileChange(module.file);
                break;
            }
        }
    }
}

// 使用WebSocket连接发送给客户端相关数据，这边逻辑与文件修改时相同

对于新增或删除的文件要判断是否是通过import.meta.glob方式来加载的，_globImporters属性实际上就是存储了import.meta.glob方式来加载的相关模块信息，具体相关信息暂不关心。

结语

本文梳理了Vite中HMR主要的处理逻辑，可以知道下面流程：

• 在预编译阶段即开发服务器创建时
  • 使用ws库来基于开发服务器（HTTP服务）创建WebSocket服务端
  • 使用chokidar创建监听器，监听相关文件变动，针对新增、删除、修改做对应处理
• 在按需编译阶段即开发服务器运行时，在客户端即@vite/client文件中使用WebSocket对象按照开发服务器地址创建WebScoket客户端从而建立连接

当修改文件后，监听器监听到对应文件改变就会触发change事件，其回调函数会被执行：

• 首先会处理依赖图谱相关的逻辑
• 对于client目录、html、vite配置文件等不同文件的更改会通知浏览器做相关操作，通知的机制就是通过WebSocket连接来实现的
  • vite配置文件的更改会重启服务器
  • client目录下文件和html文件会触发full-load类型的操作，该操作浏览器直接是location.reload， 即重新加载
  • 其他文件更改触发update类型操作，而update类型下又细分js-update和css-update子类型，其中对于js模块的更新，会构建?import&t=时间戳形式的地址使用import动态加载模块，加载后的内容会存入队列中批量更新

当新增或删除文件后，监听器就会触发add、unlink事件，之后通知客户端更新的逻辑与新增操作时并没有任何区别，只是要处理模块不同而已。