谈到 Vite，给人的第一印象就是 dev server 启动速度快。同样规模的项目，相比 Webpack 动辄十几秒甚至几十秒的的启动速度，Vite 简直是快到没朋友，往往数秒之内即可完成启动(PS

1.前端常见工具之间的定位与联系，如webpack、rollup、vite、vue-cli等。 2.从运行原理、构建方式、HMR热更新机制、使用成本等方面逐一去分析，vite与webpack之间的差异

`代码变更后查看更新后的页面效果`一直以来都是前端工程师的工作流程当中出现频率最高的环节 在前端界还没有大量工具与解决方案的时代，工程师们一度是通过`手动/自动刷新页面`的方式来解决应对这个开发环节

近年来，前端领域技术更新迭代节奏较快，前端工程师们为了更好的进行项目开发、测试、构建、部署，开发出了各种各样的构建工具，像常见的Webpack、Rollup、Esbuild、Vite，每一类工具都有

概念 HMR也叫热更新，HMR 最初由 Webpack 设计实现，至今已几乎成为现代工程化工具必备特性之一。在 HMR 之前，应用的加载、更新是一种页面级别的原子操作，即使只是单个代码文件发生变更都需

vite 在开发环境能够做到秒启动的原因有两个 No Bundle：即跳过打包，通过浏览器 ESModule 解析源文件 依赖预构建：将常用依赖提前编译和处理，从而在启动阶段大大减少了开销 依赖预构建

本文讲的会讲述热更新的每个流程，主要的作用是什么，还有这些流程是怎么串起来的，目的是帮助大家对热更新的流程有个基本的了解。