大家好我是蜗牛，热衷于用大白话讲解复杂的知识，让新手也能很好的接受。

上一篇文章我们介绍了 Vite 的工作原理，是如何快速实现项目构建的 # 面试官："Vite为什么快？"，在明白了 Vite 的构建原理之后我们再来细聊一下，Vite 中的热更新是如何实现的

1. 热更新思想

热更新的效果是当整个项目中任何一处代码有变更时，浏览器在不需要手动刷新的情况下，就能自动更新页面，这种效果听起来很简单，实现起来呢？其实也简单

主要的思想就是，只要有代码变更，我 Vite 服务端就要想办法主动通知浏览器，或者说，主动将变更内容发送给浏览器，诶？浏览器不发请求，服务端主动通知？这不就是 WebSocket 嘛！！！

所以核心思路更清晰了，项目代码变更，只要有办法感知到代码变更了，直接 WebSocket 推送给浏览器就好了。可是怎么感知到代码变更呢？ chokidar库刚好实现这个效果

2. 实现过程

Vite 服务端：

安装 ws 和 chokidar

npm i ws
npm i chokidar
创建 socket 连接

javascript 复制代码

const WebSocket = require('ws');
const wss = new WebSocket.Server({ server });  // server 部分代码省略了

wss.on('connection', (ws) => {
  // 在客户端连接时执行的代码
  console.log('Client connected');

  // 在连接关闭时执行的代码
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

增加 chokidar 监听全局文件

javascript 复制代码

const WebSocket = require('ws');
const wss = new WebSocket.Server({ server });
const chokidar = require('chokidar');

wss.on('connection', (ws) => {
  // 在客户端连接时执行的代码
  console.log('Client connected');

  // 在连接关闭时执行的代码
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});


const watcher = chokidar.watch('.', {
  ignored: ['**/node_modules/**', '**/.git/**'],
  persistent: true, // 持久监听
});

watcher.on('change', (path) => {
  // 发送热更新通知给所有连接的客户端
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send('update');
    }
  });
});

客户端 index.html 增加 socket 连接

xml 复制代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue</title>
</head>

<body>
  <div id="app"></div>

  <script>
    const socket = new WebSocket("ws://localhost:8080");

    socket.addEventListener("open", function (event) {
      socket.send("Hello Server!");
    });

    socket.addEventListener("message", function (event) {
      console.log("Message from server ", event.data);
      window.location.reload() // 接收到后端的推送后直接刷新页面
    });


    window.process = {
      env: {
        NODE_ENV: 'dev'
      }
    }

  </script>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

如此一来便实现了前后端的 socket 的连接，当 chokidar 监听到文件变更时，客户端会接收到一个 'update' 通知，客户端直接做刷新页面的操作

3. 优化客户端代码

客户端的 index.html 被我们写入了过多的代码，这些在官方的 Vite 中都是不存在的，我们修改 simple-vite.js 中的部分代码代码

这里就不展示热更新的效果了，最后效果是正常的！

4. 总结一下

我们这里写的代码是一个热更新的核心原理，源码要考虑的细枝末节更多，总体来说，Vite 中的热更新，就是借助 WebSocket 建立前后端的连接，通过类似于 chokidar 这样的文件监听的库来实时监听整个项目中的所有文件资源，当有资源发生变更的时候就向客户端推送一个更新通知，客户端做刷新项目的操作。

完整代码在这里

【Vite原理】之热更新原理

1. 热更新思想

2. 实现过程

3. 优化客户端代码

4. 总结一下