主要观点总结
Vite 是一种前端构建工具，它使用了两种不同的资源处理方式：在开发环境中，Vite 以原生ESM方式提供源码，并在浏览器端进行部分打包工作，支持动态导入代码，只在当前需要时才进行处理；而在生产环境中，Vite 则利用 Rollup 对代码进行打包处理，通过 tree-shaking、懒加载和 chunk 分割为浏览器提供最终的代码资源。Vite 在开发环境中实现了 HMR（热模块替换）特性，允许在不刷新页面的情况下更新代码，提升了开发效率。在代码中，HMR 的实现依赖于特定的 API，如 import.meta.hot.accept()、import.meta.hot.dispose()、import.meta.hot.prune() 和 import.meta.hot.invalidate()，它们允许模块被替换、清理和修剪。Vite 的 HMR 实现还涉及到文件系统的监视、模块过滤和扩展、模块失效、HMR 传播以及 HMR 客户端的初始化和处理，确保只有在模块更新时才进行页面的重新加载。
关键观点总结
关键观点1: Vite的开发环境资源处理方式
Vite在开发环境中使用原生ESM方式提供源码，并在浏览器端进行部分打包工作，支持动态导入代码，只在当前需要时才进行处理。
关键观点2: Vite的生产环境资源处理方式
Vite在生产环境中利用Rollup对代码进行打包处理，通过tree-shaking、懒加载和chunk分割为浏览器提供最终的代码资源。
关键观点3: Vite的HMR特性
Vite在开发环境中实现了HMR特性，允许在不刷新页面的情况下更新代码，提升了开发效率。
关键观点4: Vite的HMR实现依赖于特定的API
Vite的HMR实现依赖于特定的API，如import.meta.hot.accept()、import.meta.hot.dispose()、import.meta.hot.prune()和import.meta.hot.invalidate()，这些API允许模块被替换、清理和修剪。
关键观点5: Vite的HMR实现流程
Vite的HMR实现涉及到文件系统的监视、模块过滤和扩展、模块失效、HMR传播以及HMR客户端的初始化和处理，确保只有在模块更新时才进行页面的重新加载。
文章预览
❝ 幸福的三大要素是：有要做的事（something to do）、有要爱的人（someone to love）、有寄予希望的东西（something to hope for） ❞ 前言 用过 Vite 进行项目开发的同学，肯定听说过， Vite 在开发环境和生产环境是两种不同的资源处理方式。 在开发环境， Vite 以 原生ESM 方式提供源码，让浏览器接管了打包程序的部分工作： Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。 而在本地开发中，肯定会有本地代码的变更处理，如何最大限度的在不刷新整体页面的情况下，进行代码的替换呢。这就用到HMR [1] 这一特性。而承载 HMR 的部分就是，我们需要在开发阶段启动一个 Dev Server 。体现在代码中就是我们在 Vite 的配置文件- vite.config.ts 中会有一个单独的字段 - server ,更详细的解释可以
………………………………
