深入浅出 Vite
Webpack 或 Create React App 等旧工具的工作原理是先对整个项目进行打包。工具会读取每个文件，并将它们转换成一个巨大的 JavaScript 文件。这对于小型项目行之有效，但对于大型项目则会失效。在大型项目中，这个过程需要耗费数秒。每当你保存一个文件时，工具都必须重新执行大部分工作。
Vite 的工作方式则不同。现代浏览器原生支持 ES modules。这意味着浏览器可以自行处理 import 和 export。在开发过程中，Vite 不会对你的代码进行打包。它仅在浏览器请求时，才将每个文件作为独立的模块进行提供。
想象一下自助餐厅。厨师在开门营业前会把每一道菜都做出来。如果你想要一点小变动，厨师就必须重新准备整个自助餐。这就是 Webpack 的工作方式。项目越大，等待时间就越长。
Vite 则像是一家点菜式餐厅。餐厅可以立即开门。你点一道菜，厨师就只做那一道菜。如果你稍后想要甜点，厨师也只准备甜点。你不需要等待整份菜单全部准备就绪。
Vite 针对两种不同的需求采用了两种不同的策略：
开发阶段 (vite dev) • 策略：直接提供原生 ESM 模块，无需打包。 • 启动速度：即时。它不依赖于项目的大小。 • 原因：在你的电脑上，本地 HTTP 请求非常快。
生产阶段 (vite build) • 策略：使用 Rolldown 对所有内容进行打包。 • 启动速度：耗时随项目规模增长。 • 原因：数百个独立文件会导致用户端产生过多的 HTTP 请求。打包可以解决这个问题。
Vite 在你编写代码时提供速度，在发布上线时提供效率。