JS `Vite` `Hot Module Replacement (HMR)` 原理：无打包 HMR 实现

各位靓仔靓女，晚上好！我是你们今晚的HMR特约讲师，代号“Bug终结者”。今天咱们不搞虚的，直接开讲Vite的HMR，而且是那种“无打包HMR”的硬核原理！保证你听完之后，下次面试再被问到HMR，直接把面试官聊到怀疑人生。

一、HMR：前端开发的“回血”神器

首先，啥是HMR？ HMR（Hot Module Replacement），中文名叫“热模块替换”。简单来说，就是你在改代码的时候，不用刷新浏览器，页面就能自动更新。就像游戏里的“回血”技能，改完代码瞬间生效，爽歪歪！

想想以前，改一点点代码就要刷新整个页面，数据丢失不说，效率也低得令人发指。 HMR的出现，简直是程序员的福音。

二、传统HMR的痛点：打包的负担

早期的HMR，比如webpack的HMR，它需要打包器全程参与。每次修改代码，webpack都要重新构建一部分模块，然后通过websocket通知浏览器替换。

这种方式虽然也能实现HMR，但是有个很大的问题：慢！

尤其是项目越来越大，打包的速度就越慢。改一行代码，等半天才能看到效果，HMR的意义都快没了。

三、Vite的“无打包HMR”：快到飞起

Vite的出现，彻底改变了HMR的游戏规则。它利用了浏览器原生的ES Module特性，实现了“无打包HMR”。

啥叫“无打包”？就是Vite在开发阶段，根本不进行完整的打包！

它只是简单地启动一个开发服务器，然后把你的代码当成一个个ES Module模块直接扔给浏览器。

浏览器看到<script type="module">标签，就会自动发起请求，去加载对应的模块。

四、Vite HMR的核心原理：ESM + WebSocket

Vite HMR的核心技术就两个：ESM (ES Modules) 和 WebSocket。

ESM：模块化的基石

ESM是ES Module的简称，是JavaScript官方的模块化方案。它可以让浏览器像Node.js一样，直接加载和执行模块。

Vite就是利用了ESM的这个特性，把你的代码分割成一个个模块，然后让浏览器自己去加载。
WebSocket：实时通信的桥梁

WebSocket是一种在客户端和服务器之间建立持久连接的协议。 Vite使用WebSocket来实现服务器和浏览器之间的实时通信。

当你的代码发生变化时，Vite服务器会通过WebSocket通知浏览器，告诉它需要更新哪些模块。

五、Vite HMR的实现步骤：庖丁解牛式讲解

接下来，咱们来一步一步地解剖Vite HMR的实现过程。

Vite启动开发服务器

Vite首先会启动一个开发服务器，这个服务器主要负责两件事：
- 提供静态资源服务（HTML、CSS、JS等）。
- 监听文件变化。
你可以把这个服务器想象成一个“快递站”，负责把你的代码送到浏览器。
浏览器加载入口模块

你的HTML文件中会有一个<script type="module">标签，指向你的入口模块。

浏览器看到这个标签，就会向Vite服务器发起请求，加载入口模块。

例如：
```
<!DOCTYPE html>
<html>
<head>
  <title>Vite HMR Demo</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>
```
这里的/src/main.js就是入口模块。
Vite转换模块

Vite服务器接收到浏览器的请求后，会根据你的配置，对模块进行一些转换。

比如：
- 把ES Next语法的代码转换成ESM代码。
- 处理CSS Modules。
- 处理静态资源引用。
这个过程类似于“快递站”对包裹进行分拣和包装。
浏览器加载依赖模块

入口模块会引用其他的模块，浏览器会根据import语句，继续向Vite服务器发起请求，加载这些依赖模块。

这个过程会一直递归下去，直到加载完所有的模块。
建立WebSocket连接

Vite客户端（在浏览器中运行的一段代码）会和Vite服务器建立一个WebSocket连接。

这个连接是双向的，服务器可以主动向客户端发送消息，客户端也可以向服务器发送消息。

你可以把WebSocket连接想象成一个“对讲机”，让服务器和浏览器可以随时沟通。
监听文件变化

Vite服务器会监听你的代码文件，一旦发现文件发生变化，就会立即通知浏览器。

这个过程类似于“快递站”的监控系统，随时关注包裹的状态。
HMR更新模块

当Vite服务器检测到文件变化时，会执行以下步骤：
- 确定需要更新的模块。
- 把更新后的模块代码发送给浏览器。
- 通知浏览器替换旧的模块。
浏览器收到服务器的通知后，会执行以下操作：
- 卸载旧的模块。
- 加载新的模块。
- 更新页面上的相关内容。
这个过程就是HMR的核心，它让你的代码修改能够实时反映到页面上。

六、Vite HMR代码示例：手把手教你实现一个简易版HMR

为了让你更好地理解Vite HMR的原理，咱们来手写一个简易版的HMR。

1. 项目结构

首先，创建一个简单的项目结构：

hmr-demo/
├── index.html
├── src/
│   ├── main.js
│   ├── component.js
│   └── style.css
└── server.js

2. index.html

<!DOCTYPE html>
<html>
<head>
  <title>Simple HMR Demo</title>
  <link rel="stylesheet" href="/src/style.css">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <script>
      // 客户端 HMR 代码 (简化版)
      const ws = new WebSocket('ws://localhost:3000');
      ws.onmessage = (event) => {
          if (event.data === 'update') {
              // 强制刷新页面（实际HMR会更精细地更新模块）
              console.log('代码已更新，刷新页面...');
              location.reload();
          }
      };
  </script>
</body>
</html>

3. src/main.js

import component from './component.js';

const app = document.getElementById('app');
app.innerHTML = component();

4. src/component.js

export default function component() {
  return `<h1>Hello HMR!</h1><p>This is a component.</p>`;
}

5. src/style.css

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
}

6. server.js (简易版Node.js服务器)

const http = require('http');
const fs = require('fs');
const path = require('path');
const WebSocket = require('ws');

const PORT = 3000;

const server = http.createServer((req, res) => {
  let filePath = '.' + req.url;
  if (filePath === './') {
    filePath = './index.html';
  }

  const extname = path.extname(filePath);
  let contentType = 'text/html';

  switch (extname) {
    case '.js':
      contentType = 'text/javascript';
      break;
    case '.css':
      contentType = 'text/css';
      break;
  }

  fs.readFile(filePath, (err, content) => {
    if (err) {
      if (err.code === 'ENOENT') {
        res.writeHead(404);
        res.end('404 Not Found');
      } else {
        res.writeHead(500);
        res.end('500 Internal Server Error');
      }
    } else {
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(content, 'utf-8');
    }
  });
});

const wss = new WebSocket.Server({ server });

wss.on('connection', ws => {
  console.log('Client connected');
});

server.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

// 简易的文件监听器
function watchFiles(dir, callback) {
  fs.readdir(dir, (err, files) => {
    if (err) {
      console.error('Error reading directory:', err);
      return;
    }

    files.forEach(file => {
      const filePath = path.join(dir, file);

      fs.stat(filePath, (err, stats) => {
        if (err) {
          console.error('Error getting file stats:', err);
          return;
        }

        if (stats.isFile()) {
          fs.watchFile(filePath, (curr, prev) => {
            if (curr.mtime !== prev.mtime) {
              console.log(`${filePath} changed`);
              callback();
            }
          });
        } else if (stats.isDirectory()) {
          watchFiles(filePath, callback); // 递归监听子目录
        }
      });
    });
  });
}

// 监听文件变化并通知客户端
watchFiles('./src', () => {
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send('update'); // 简易的更新消息
    }
  });
});

使用说明：

确保你安装了Node.js。
安装WebSocket依赖：npm install ws
运行服务器：node server.js
在浏览器中打开 http://localhost:3000
修改 src/component.js 文件，保存。
你会看到浏览器自动刷新。

代码解释：

server.js：创建一个简单的HTTP服务器，用于提供静态资源服务，并使用WebSocket与客户端通信。监听./src 目录下的所有文件，当文件发生变化时，会向所有连接的客户端发送'update'消息。
index.html：加载src/main.js作为ES Module，并建立WebSocket连接，监听服务器发送的'update'消息，收到消息后强制刷新页面。
src/main.js和src/component.js：简单的模块，用于展示HMR的效果。

注意：

这只是一个非常简易的HMR示例，只能实现页面刷新。真正的Vite HMR会更智能地更新模块，避免不必要的页面刷新。这个例子只是为了帮助你理解HMR的基本原理。

七、Vite HMR的优点：

快！快！快！：由于无需打包，HMR速度极快，几乎是瞬时生效。
按需编译：只编译你修改的模块，而不是整个项目。
更好的开发体验：告别漫长的等待，享受丝滑般的开发体验。

八、Vite HMR的局限性：

依赖于ESM：必须使用ESM规范编写代码。
需要浏览器支持：需要浏览器支持ESM和WebSocket。

九、总结：

Vite的“无打包HMR”是前端开发领域的一项重大创新。它利用了浏览器原生的ESM特性，实现了极速的HMR体验，极大地提升了开发效率。

虽然Vite HMR有一些局限性，但瑕不掩瑜，它仍然是目前最优秀的HMR方案之一。

希望通过今天的讲解，你能够对Vite HMR的原理有更深入的了解。下次面试的时候，记得把这篇文章背下来，然后狠狠地秀一把！

今天的讲座就到这里，感谢大家的观看！如果还有疑问，欢迎随时提问，我会尽力解答。祝大家早日成为HMR大师！

发表回复 取消回复

发表回复取消回复