郑州网站建设报价表百度直播
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。