likes
comments
collection
share

【Vite原理】之热更新原理

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

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

1. 热更新思想

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

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

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

2. 实现过程

Vite 服务端：

  1. 安装 ws 和 chokidar

    npm i ws npm i chokidar

  2. 创建 socket 连接

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');
  });
});
  1. 增加 chokidar 监听全局文件
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');
    }
  });
});
  1. 客户端 index.html 增加 socket 连接
<!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 中的部分代码代码

【Vite原理】之热更新原理

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

4. 总结一下

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

完整代码在这里

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