网站制作品牌公司网络运营团队
esbuild
优点
- 基于go语言，go是纯机器码
- 不使用 AST，优化了构建流程
- 多线程并行
缺点
- esbuild 没有提供 AST 的操作能力。所以一些通过 AST 处理代码的 babel-plugin 没有很好的方法过渡到 esbuild 中（比如babel-plugin-import）。如果你的项目使用了 babel-plugin-import, 或者一些自定义的 babel-plugin 。在目前来看是没有很好的迁移方案的。
- 不支持将es6转换为es5(这里不用babel是因为babel会将代码转换为cjs语法,而esbuild是基于es6语法)
roolup
优点
- 打包结果依然完全可读
缺点
- 模块最终都会被打包到一个函数中，无法实现HMR
- 加载非ESM的第三方模块比较复杂
Vite
优点
- 开发环境编译快：
开发环境冷启动无需打包，只是使用esbuild对依赖进行预构建，将CommonJS和UMD发布的依赖转换为浏览器支持的ESM - 无需分析模块之间的依赖，无需在启动开发服务器前进行编译
- 在一开始将应用中的模块区分为 依赖 和 源码 两类，源码模块协商缓存，依赖模块强缓存（依赖大多为开源的不会变动的node_modules模块，请求路径满足 /^/@modules// 格式就会被认为是依赖）
- Vite 热更新更快：利用了ESM和浏览器缓存技术，构建后的依赖请求（http头的max-age=31536000,immutable）进行强缓存，以提高页面性能。
更新速度与项目复杂度无关。
缺点
- 生产环境和开发环境不一致
由于 Vite 还是使用的 es module 模块不能直接使用生产环境（兼容性问题，如果你的项目不需要兼容 IE11 等低版本的浏览器，自然是可以使用的）,生产环境使用 rollup 打包可能会造成开发环境与生产环境的不一致。很多 第三方 sdk 没有产出 ESM格式的的代码，这个需要自己去做一些兼容。目前支持 CommonJS（CJS）代码快速转化为 ESM，但是对于一些格式不规范的代码，可能还是需要单独处理。
vite在esbuild和roolup之间如何选择
对比在开发环境Vite使用esbuild来构建依赖，生产环境Vite则使用了更加成熟的Rollup来完成整个打包过程。因为esbuild虽然快，但针对应用级别的代码分割有问题、CSS处理仍然不够稳定，同时也未能兼容一些未提供ESM的SDK。