Webpack 和 Vite 热更新的原理与源码对比

小小小小宇
481 阅读3分钟

Webpack 和 Vite 热更新的原理与源码对比

热模块替换（Hot Module Replacement，简称 HMR）是现代前端开发中提升开发效率的重要特性。它允许在不刷新整个页面的情况下，替换、添加或删除模块，从而实现快速的开发迭代。Webpack 和 Vite 都支持 HMR，但它们的实现原理和源码结构存在差异。以下将详细介绍两者的 HMR 原理、源码对比以及各自的优缺点。

一、Webpack 的 HMR 原理

1.1 基本流程

  1. 监听文件变化：Webpack 使用 webpack-dev-server 或 webpack-dev-middleware 监听源文件的变化。
  2. 重新编译模块：当检测到文件变化时，Webpack 只重新编译受影响的模块，而不是整个项目。
  3. 发送更新信息：通过 WebSocket 将更新信息（如模块 ID）发送给浏览器。
  4. 应用更新：浏览器端的 HMR 客户端接收到更新信息后，使用 webpack/hot/dev-server 提供的 API 应用新的模块代码。
  5. 模块更新与状态保持：如果模块支持 HMR（即实现了对应的接口），它可以在更新时保持其状态，否则会触发页面刷新。

1.2 关键源码解析

HotModuleReplacementPlugin
// webpack/lib/HotModuleReplacementPlugin.js
class HotModuleReplacementPlugin {
    apply(compiler) {
        compiler.hooks.compilation.tap('HotModuleReplacementPlugin', (compilation) => {
            // 设置 HMR 相关的编译钩子
            compilation.hooks.hotModuleReplacement.tap('HotModuleReplacementPlugin', () => {
                // HMR 逻辑
            });
        });
    }
}
HMR 客户端
// webpack-dev-server/client/index.js
const socket = new WebSocket(clientUrl);
socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.type === 'update') {
        // 处理更新逻辑
        hotApply();
    }
};
模块热更新逻辑
// webpack/hot/dev-server.js
function hotApply() {
    // 获取更新的模块
    const updatedModules = getUpdatedModules();
    updatedModules.forEach(moduleId => {
        // 重新加载模块
        __webpack_require__.e(moduleId).then(() => {
            __webpack_require__(moduleId);
            // 触发模块更新
            hotModule.accept(moduleId, callback);
        });
    });
}

1.3 优缺点

优点：

  • 成熟稳定：Webpack 作为历史悠久的打包工具，其 HMR 功能经过广泛使用和测试。
  • 灵活性高：支持多种插件和自定义配置，适应复杂项目需求。

缺点：

  • 配置复杂：HMR 的配置相对复杂，尤其在大型项目中，可能需要大量手动配置。
  • 性能开销：在大项目中，Webpack 的编译和 HMR 更新可能会带来一定的性能开销。

二、Vite 的 HMR 原理

2.1 基本流程

  1. 原生 ES 模块：Vite 利用浏览器支持的 ES 模块，避免了打包步骤，加快了开发启动速度。
  2. 文件变化监听：使用 chokidar 监听文件变化。
  3. 模块重载：当检测到文件变化时，Vite 仅重新加载受影响的模块，通过 WebSocket 通知浏览器。
  4. 浏览器更新：浏览器端接收到更新信息后，利用原生 ES 模块的动态 import 功能重新加载模块，保持应用状态。

2.2 关键源码解析

vite/hmr 服务
// vite/src/node/server/hmr.ts
export function createHmrServer(server: ViteDevServer) {
    const wss = new WebSocket.Server({ server: server.httpServer });

    wss.on('connection', (ws) => {
        ws.on('message', (message) => {
            // 处理客户端消息
        });
    });

    return {
        broadcast: (payload: HmrPayload) => {
            wss.clients.forEach(client => {
                if (client.readyState === WebSocket.OPEN) {
                    client.send(JSON.stringify(payload));
                }
            });
        }
    };
}
HMR 客户端
// vite/src/client/hmr.ts
const socket = new WebSocket(`ws://${location.host}/`);
socket.onmessage = (event) => {
    const data: HmrPayload = JSON.parse(event.data);
    if (data.type === 'update') {
        // 处理更新逻辑
        applyUpdate(data);
    }
};

function applyUpdate(payload: HmrPayload) {
    payload.modules.forEach(module => {
        import(/* @vite-ignore */ module.url).then(newModule => {
            // 替换模块
            hotReplaceModule(module.url, newModule);
        });
    });
}
模块替换逻辑
// vite/src/client/hmr.ts
function hotReplaceModule(url: string, newModule: any) {
    // 获取当前模块
    const currentModule = getModuleByUrl(url);
    if (currentModule && currentModule.hot) {
        currentModule.hot.accept(() => {
            // 执行接受回调
            updateUI(newModule);
        });
    }
}

2.3 优缺点

优点：

  • 高性能：利用原生 ES 模块，减少了打包开销，提升了 HMR 的速度。
  • 配置简易：Vite 默认开箱即用，HMR 配置简单，适合快速开发。
  • 即时更新：模块更新速度快，几乎无感刷新体验。

缺点：

  • 生态较新：相比 Webpack，Vite 生态尚在发展中，某些复杂场景下的支持可能不如 Webpack 完善。
  • 兼容性问题：依赖于浏览器的原生 ES 模块支持，旧版浏览器可能无法兼容。

三、Webpack 与 Vite HMR 源码对比

3.1 架构对比

  • Webpack：基于打包的架构，HMR 集成在打包流程中，通过插件和中间件实现。
  • Vite：基于原生 ES 模块的架构，HMR 独立于打包过程，通过服务端和客户端的 WebSocket 通信实现。

3.2 性能对比

  • Webpack：在大型项目中，由于需要打包整个项目，初始编译时间较长，但 HMR 通过按需编译优化了更新速度。
  • Vite：初始启动速度极快，HMR 更新更为迅速，因为只需重新加载变化的模块，不涉及全局打包。

3.3 易用性对比

  • Webpack：配置灵活但复杂，适合需要高度自定义的项目。
  • Vite：配置简洁，开箱即用，适合中小型项目和快速开发。

四、总结

Webpack 和 Vite 都提供了强大的 HMR 功能，但它们在实现原理、性能和易用性上各有优势。Webpack 适合需要高度自定义和在大型项目中使用，而 Vite 则以其高性能和简易配置成为现代前端开发的新宠。根据项目需求和团队熟悉度选择合适的工具，可以有效提升开发效率和用户体验。

参考源码文件

class HotModuleReplacementPlugin {
    apply(compiler) {
        compiler.hooks.compilation.tap('HotModuleReplacementPlugin', (compilation) => {
            compilation.hooks.hotModuleReplacement.tap('HotModuleReplacementPlugin', () => {
                // HMR 插件逻辑
            });
        });
    }
}

export function createHmrServer(server: ViteDevServer) {
    const wss = new WebSocket.Server({ server: server.httpServer });

    wss.on('connection', (ws) => {
        ws.on('message', (message) => {
            // 处理客户端消息
        });
    });

    return {
        broadcast: (payload: HmrPayload) => {
            wss.clients.forEach(client => {
                if (client.readyState === WebSocket.OPEN) {
                    client.send(JSON.stringify(payload));
                }
            });
        }
    };
}

const socket = new WebSocket(`ws://${location.host}/`);
socket.onmessage = (event) => {
    const data: HmrPayload = JSON.parse(event.data);
    if (data.type === 'update') {
        applyUpdate(data);
    }
};

function applyUpdate(payload: HmrPayload) {
    payload.modules.forEach(module => {
        import(/* @vite-ignore */ module.url).then(newModule => {
            hotReplaceModule(module.url, newModule);
        });
    });
}

function hotReplaceModule(url: string, newModule: any) {
    const currentModule = getModuleByUrl(url);
    if (currentModule && currentModule.hot) {
        currentModule.hot.accept(() => {
            updateUI(newModule);
        });
    }
}

结语

通过对比 Webpack 和 Vite 的 HMR 实现，我们可以看到两者在设计理念和技术实现上的不同。选择合适的工具不仅能提升开发效率，还能优化项目的性能表现。随着前端技术的不断发展，了解不同工具的底层原理将有助于开发者更好地应对各种开发挑战。

avatar
文章
阅读
粉丝