简单实现Vite的HRM热更新

- 热更新过程

在server端发现了文件更新，推送一个事件到浏览器前端，浏览器知道文件更新了，重新请求这个新的模块，去替换老的模块。

- 操作过程

• 首先npm init @vitejs/app
• 选择vanilla空项目

一开始mian.js为，且我们修改代码页面会刷新，而不是热更新。

先把该操作封装到render函数里面执行，我们热更新需要引入判断import.meta.hot是否有没有，像我们线上环境就不用热更新的。

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    newModule.render()
  })
}

我们看看控制台每次我们该一次代码，这里多出一个mian.js的请求，且页面不刷新。

这些请求来的js即是Vite集成的dev server每次来的，之间的通过webSoket服务，文件更新通知浏览器请求新的模块。