Vite 与 Webpack 原理

Webpack

使用 Webpack 作为项目的构建工具并启动项目时，Webpack 会先进行打包，然后启动开发服务器，在请求服务器时直接返回打包后的结果，因此，初次启动项目时速度较慢。

Vite

相比于 Webpack，Vite 采用了一种更为灵活的方式。

现代浏览器本身就支持 ES Module（ES6+），会自动向依赖的 Module 发出请求。Vite 充分利用了这一点，将开发环境下的模块文件，直接作为浏览器要执行的文件（而不是像 Webpack 那样先进行打包合并）。

本质上，Vite 只是启动了开发者服务器，不需要经过繁琐的打包过程，也就意味着不需要分析模块的依赖关系、不需要编译，因此启动项目的速度非常快。

当浏览器需要请求某个模块时，再对其进行编译。这种动态编译的方式，极大缩减了启动项目时的编译时间，当项目越复杂、模块越多时，Vite 的优势越明显。

在 HMR（热模块替换）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像 Webpack 那样需要把该模块的相关依赖模块全部编译一次，所以效率更高。

当需要部署到生产环境时，Vite 使用 Rollup 进行打包（未来将改用 Rolldown）

因此，Vite 的主要优势在开发阶段

需要注意的是，因为 Vite 使用的是 ES Module，所以在代码中不能使用 CommonJS 的语法（意味着在 Node 环境中不能使用 Vite 进行项目构建）