>[danger]Vite 和 Webpack 的区别 1、**基于ESM的Dev server** 在`Vite`出来之前，传统的打包工具如`Webpack`是先解析依赖、打包构建再启动开发服务器，`Dev Server` 必须等待所有模块构建完成，当我们修改了 `bundle`模块中的一个子模块， 整个 `bundle` 文件都会重新打包然后输出。项目应用越大，启动时间越长。 而`Vite`利用浏览器对`ESM`的支持，当 `import` 模块时，浏览器就会下载被导入的模块。先启动开发服务器，当代码执行到模块加载时再请求对应模块的文件,本质上实现了动态加载。灰色部分是暂时没有用到的路由，所有这部分不会参与构建过程。随着项目里的应用越来越多，增加`route`，也不会影响其构建速度。 2、**基于ESM 的 HMR 热更新** 目前所有的打包工具实现热更新的思路都大同小异：主要是通过`WebSocket`创建浏览器和服务器的通信监听文件的改变，当文件被修改时，服务端发送消息通知客户端修改相应的代码，客户端对应不同的文件进行不同的操作的更新。 `Webpack`: 重新编译，请求变更后模块的代码，客户端重新加载 `Vite`: 请求变更的模块，再重新加载 `Vite` 通过 `chokidar` 来监听文件系统的变更，只用对发生变更的模块重新加载， 只需要精确的使相关模块与其临近的 `HMR`边界连接失效即可，这样`HMR` 更新速度就不会因为应用体积的增加而变慢而 `Webpack` 还要经历一次打包构建。所以 `HMR` 场景下，`Vite` 表现也要好于 `Webpack`。 3、**基于esbuild的依赖预编译优化** 4、**基于 Rollup的 Plugins** 使用`Vite`插件可以扩展`Vite`能力，通过暴露一些构建打包过程的一些时机配合工具函数，让用户可以自定义地写一些配置代码，执行在打包过程中。比如解析用户自定义的文件输入，在打包代码前转译代码，或者查找。 最后总结下`Vite`相关的优缺点： * 优点： * **快速的冷启动**: 采用`No Bundle`和`esbuild`预构建，速度远快于`Webpack` * **高效的热更新**：基于`ESM`实现，同时利用`HTTP`头来加速整个页面的重新加载，增加缓存策略 * **真正的按需加载**: 基于浏览器`ESM`的支持，实现真正的按需加载 * 缺点 * 生态：目前`Vite`的生态不如`Webapck`，不过我觉得生态也只是时间上的问题。 * 生产环境由于`esbuild`对`css`和代码分割不友好使用`Rollup`进行打包