Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon 可以使用Esbuild和Vite提高转化速度


可以使用Esbuild和Vite提高转化速度


是的,与使用WebPack(例如WebPack)相比,将Esbuild与Vite一起使用可以显着提高转换速度。这里有几个要点:

##与Esbuild的预捆绑依赖关系

Vite使用ESBUILD预先进行捆绑依赖项,比直接使用Typescript编译器(TSC)快20-30倍[3]。与基于JavaScript的捆绑器相比,此预捆绑步骤将COMPONJ/UMD模块转换为ESM,并改善了Vite的寒冷开始时间[1]。

##更快的打字稿转换

Vite利用Esbuild的自定义打字稿解析器,该解析器已针对性能进行了优化。它避免了官方打字稿编译器中的一些速度颠簸,例如大量使用巨型对象形状和不必要的动态属性访问[3]。

##经验绩效测量

基准表明,与Esbuild一起使用的Vite可以比WebPack要快得多[2]:

- 初始`YARN启动'构建:Vite 6s vs WebPack 150S
- React组件热重新加载:Vite 1S vs WebPack 13S
- 服务器数据更改“热”重新加载:Vite 13S与WebPack 17S

尽管确切的性能增长将取决于项目,但与WebPack [2]相比,使用Esbuild进行Vite的转换方面显示了显着的加速。

但是,重要的是要注意,Esbuild不执行类型检查,因此您可能需要单独运行`tsc -noemit`以确保全型安全性[4]。 Esbuild [4]等某些功能也尚未支持“ const enum”。

总之,利用Esbuild的快速转换功能是Vite比其他捆绑器的性能优势的关键因素。速度的增长可能是可观的,尤其是在开发过程中,但也有一些权衡考虑。

引用:
[1] https://vitejs.dev/guide/features
[2] https://dev.to/noriste/migrating-a-150k-loc-codebase-to-vite-vite-vite-and-esbuild-how-part-part-part-part-part-2-3-1c08
[3] https://esbuild.github.io/faq/
[4] https://github.com/vitejs/vite/issues/1585
[5] https://github.com/vitejs/vite/issues/3193