Vite 为什么更快?
- 基于原生 ES 模块(ESM):Vite 利用浏览器原生的 ES 模块,在开发模式下按需加载模块,避免了整体打包,从而减少了启动时间,这实际上是让浏览器接管了打包程序的部分工作。
- 高效的热模块替换(HMR):Vite 在开发模式下利用原生 ES 模块实现模块级的热更新。当文件发生变化时,Vite 只会重新加载发生变化的模块,而不是重新打包整个应用,极大提高了热更新的速度。
- 使用 esbuild 进行快速编译:使用 Go 编写,相比传统的 JavaScript 编译工具(如 Babel、Terser)性能更好。
- 依赖预构建:Vite 会预构建常用依赖,并将其转换为浏览器可执行的文件,将转换的包放在
node_modules/.vite/deps
文件夹下,避免每次启动时重新编译。
为什么要用 esbuild 和 rollup 两套编译工具?
- 开发环境 esbuild:性能好,速度快
- 生产环境 rollup:生态环境更全面稳定,支持代码进行 tree-shaking、懒加载和 chunk 分割
Vite 计划将由 Rust 编写的打包工具 Rolldown 替换 esbuild 和 rollup
环境配置
使用 defineConfig
函数,通过判断 command
和 mode
来加载不同的配置。