Webpack与Vite热更新差异对比

随着项目的日渐迭代，项目整体的代码量也会越来越多，从而导致项目体积越来越大；在Webpack时代，很多人会对历史项目（巨型项目）感到头疼，因为往往巨型项目在本地开发调试的时候会因为本地代码的修改触发HMR热更新重载页面，然而这一过程在Webpack的运行机制中显得很慢，并且是随着项目越大，热更新的速度也会越慢；

Webpack热更新慢的问题可以通过babel-plugin-dynamic-import-node插件来得到明显改善，或者通过手动实现动态按需加载（修改entry为当前项目中需要编译的部分或模块）亦可大幅提升热更新速度；

热更新构建主要流程

在Webpack中，我们的每一次ctrl+s操作，都会触发热更新；此时热更新构建的一个过程应该是此时的终端显示Compiling......执行重新构建并打包，并生成新的hash值，启动Webpack-dev-server服务与浏览器通过WebSocket建立连接；此时的hash值会作为下一次编译生成的文件的前缀，以此类推；每次修改会触发重新编译，然后发出两次请求；

首先看json文件，发出请求返回的结果中有一个c参数和一个h参数，c代表的是本次热更新要对应的是c模块，h代表的是本次热更新重新编译的过程中新生成的hash值，将作为下一次热更新请求编译后生成的文件前缀使用；

js文件，是修改之后重新编译生成打包后的代码，重新对文件进行下载及网络资源加载；

Vite中热更新构建过程也是类似，Vite是在本地启动Vite Server服务，通过WebSocket与浏览器进行连接通信，并加入了WebSocket的定时心跳检测机制，拿到已修改更新的文件路径以及时间戳标识，然后再次带上这个时间戳作为参数去重新请求该文件修改后的版本，防止缓存；