vite vs webpack vs esbuild

3,568

本篇文章分享下题目中三种打包工具在开发和生产模式中的实际使用感受,希望能对你有所帮助。我使用的技术栈是react+typescript+express,开发模式使用打包工具自带的开发服务器,生产模式使用一个简单的express服务器,代码放在这里GitHub。由于本文目的是对比,因此对于配置项的详细介绍以及具体代码就省略掉了,需要的可以自行查看官方文档(vitewebpackesbuild)。

配置文件Typtescript支持

vite和webpack均支持*.config.ts格式的配置文件,而esbuild由于没有对应的cli启动工具,因此其需要使用node *.js命令来启动,因此不适合使用ts。

开发模式

开发模式的对比项目主要包括配置难度、启动速度、热更新及路由的配置三个项目。

配置难度

  • vite: 最简单,几乎零配置。vite官方有许多模版可以直接使用,但即使不用模版,你只需要配置一个react热更新插件就足够了。不过,如果你使用的框架没有对应插件,或者你不希望使用默认的配置,那么你就需要仔细阅读文档,并且你需要同时学习vite和rollup甚至esbuild的文档,才能够随心所欲的配置。
  • esbuild: 比较简单。esbuild的配置项并不多,你只需要增加一个servedir就可以使用它的开发服务器了。
  • webpack: 比较复杂。这里我使用的是webpack5,只进行最基础的配置和代码分割优化,但是仍然需要安装一大堆的第三方包。其余的配置都需要根据文档一步步进行配置,对于新手并不是特别友好。另外,由于ts-loader实在太慢,我这里使用了esbuild-loader(应该是最快加载ts文件的loader了)。

启动速度(使用相同的代码及入口)

  • esbuild: 最快。 image.png
  • vite: 比esbuild慢近10倍,但实际感知不强,依然非常的快。 image.png
  • webpack: 比vite慢10倍有余,实际能感知,需要等待。 image.png

热更新及react-router路由配置

  • vite: 配置官方插件后支持热更新及react-router
  • webpack: 热更新需要在devServer中开启,react-router也需要进行配置
  • esbuild: 开发服务器不支持热更新,不支持react-router配置

生产模式

生产模式主要对比代码分离和速度两个项目。其配置难度可以参考开发模式,另外,实际三个打包工具都可以将开发模式和生产模式的配置集成在一个配置文件中,但是这里为了对比,我分别写了开发和生产的配置文件。

代码分离 和 打包速度

  • esbuild: 速度最快,但代码分离效果最差。可以看到,最大的js文件有4.8mb,这是无法部署在生产环境中的,如果你需要再优化,配置项目中是没有相关配置的,你需要修改你的代码。 image.png
  • vite: 速度一般,代码分离效果不错。可以看到最大的js文件约1mb,已经勉强可以部署了。而且这使用的是默认的配置,也就是几乎零配置的效果,你还可以通过rollup配置项来继续优化。 image.png
  • webpack: 速度一般,代码分离效果不错。这里webpack之所以能和vite打包速度相差无几,很大程度是esbuild-loader的原因,代码分离的情况和vite差不多,都是最大的js文件约1mb,并且也可以继续进行优化。 image.png

总结

  1. vite: vite在配置难易度和速度方面确实较webpack有很大优势,对于新手而言极为友好,开发过程的体验可以说是三者中最为舒适的。
  2. webpack: webpack的速度是一个大问题,虽然借助esbuild-loader加快了打包速度,但是仍逊于vite,不过其优势在于插件及各类功能的丰富,而且不依赖于其他工具,当你的项目需要较多的插件时,很大概率你要使用webpack。
  3. esbuild: esbuild确实很快。但是除了快其他的体验都不好,这是一个不成熟的工具,期待其功能的完善。

个人建议

如果是一个新开始的项目,建议使用vite作为打包工具,你可以使用或不使用官方的模版,都不会影响你的使用体验,之后随着项目变得复杂,你可能会需要使用webpack,但是到时候再转变我认为不是一个困难的事情。如果是一个老的项目,那么你需要慎重考虑,或许优化现有的工具是一个更好的选择。