webpack和vite对比
热更新时webpack做了什么
总的来说，webpack的热更新就是，当我们对代码做修改并保存后，webpack会对修改的代码块进行重新打包，并将新的模块发送至浏览器端，浏览器用新的模块代替旧的模块，从而实现了在不刷新浏览器的前提下更新页面。相比起直接刷新页面的方案，HMR的优点是可以保存应用的状态。当然，随着项目体积的增长，热更新的速度也会随之下降。
热更新时vite做了什么
热更新主要与项目编写的源码有关。前面提到，对于源码，vite使用原生esm方式去处理，在浏览器请求源码文件时，对文件进行处理后返回转换后的源码。vite对于热更新的实现，大致可以分为三步：
a. 监听文件变动
b. 读取文件内容
c. 通知浏览器做相应的更新
vite热更新的实现原理
创建一个websocket服务端。vite执行createWebSocketServer函数，调用ws库创建ws服务端。
创建一个ws客户端来接收ws服务端的信息。vite首先会创建一个ws client文件，然后在处理入口文件index.html时，把对ws client文件的引入注入到index.html文件中。当浏览器访问index.html时，就会加载ws client文件并执行，创建一个客户端ws，从而接收ws服务端的信息。
服务端监听文件变化，发送websocket消息，通知客户端。
服务端调用handleHMRUpdate函数，该函数会根据此次修改文件的类型，通知客户端是要刷新还是重新加载文件。
一个小细节：vite对于node_modules的文件做了强缓存，而对我们编写的源码做了协商缓存。
总结：vite为什么比webpack快
构建速度快：Webpack 会先将代码打包，然后启动开发服务器，请求服务器时返回打包后的结果；而 Vite 是直接启动开发服务器，请求哪个模块再对该模块进行实时编译，省去了打包的过程。
热更新快：相比起webpack，vite会让浏览器帮忙做更多的事情。vite 采用立即编译当前修改文件的办法，当改动了一个模块后，仅需让浏览器重新请求该模块即可。同时 vite 还会使用缓存机制( http 缓存、 vite 内置缓存 )，加载更新后的文件内容。
作者：BokFang
链接：https://juejin.cn/post/7016507506889326605
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
