In this article, I hope you will find the three packaging tools mentioned in the title useful in both development and production mode. The stack I use is React +typescript+ Express. In development mode, I use a development server that comes with the packaging tool. In production mode, I use a simple Express server and put the code on GitHub. Since the purpose of this article is to compare, the detailed introduction of configuration items and specific codes are omitted. You can check the official documents (Vite, Webpack, esbuild) if you need them.

Configuration file Typtescript support

Both Vite and Webpack support configuration files in *.config.ts format. Esbuild does not have a corresponding CLI startup tool, so it needs to use node *.

Development mode

The comparison items of development mode mainly include three items of configuration difficulty, startup speed, hot update and routing configuration.

Configure the difficulty

  • Vite: The simplest, almost zero configuration. Vite has many templates that you can use directly, but even if you don’t use a template, you only need to configure a React hot update plugin. However, if the framework you’re using doesn’t have plug-ins, or if you don’t want to use the default configuration, then you’ll need to read the documentation carefully, and you’ll need to study the documentation for Vite and Rollup and even esBuild to do what you want.
  • Esbuild: It’s easy. Esbuild doesn’t have many configuration items; you just need to add a servedir to use its development server.
  • Webpack: It’s complicated. Here I use webpack5, with minimal configuration and code splitting optimizations, but still a lot of third-party packages to install. The rest of the configuration needs to be configured step by step according to the documentation, which is not particularly friendly for beginners. Also, since TS-Loader is too slow, I used esbuild-Loader (probably the fastest loader to load TS files).

Startup speed (use the same code and entry)

  • Esbuild: fastest.

  • Vite: Nearly 10 times slower than Esbuild, but not as strong in actual perception, still very fast.

  • Webpack: More than 10 times slower than Vite, actually aware and waiting.

Hot update andreact-routerThe routing configuration

  • Vite: support hot update after configuring official plug-ins andreact-router
  • Webpack: Hot updates need to be enabled in devServer,react-routerAlso need to be doneconfiguration.
  • Esbuild: Development server does not support hot update, not supportedreact-routerconfiguration

Production mode

Production mode mainly compares the two projects of code separation and speed. The configuration difficulty can be referred to the development mode. In addition, the actual three packaging tools can integrate the configuration of development mode and production mode into one configuration file, but here I have written the development and production configuration files respectively for comparison.

Code separation and packaging speed

  • Esbuild: Fastest, but worst code separation. As you can see, the largest JS file is 4.8MB, which cannot be deployed in a production environment. If you need to optimize, there is no relevant configuration in the configuration project, you need to modify your code.

  • Vite: Average speed, good code separation. As you can see, the largest JS file is about 1MB, which is barely deployable. And this uses the default configuration, which is almost zero configuration, which you can further optimize by rollup configuration items.

  • Webpack: Average speed, good separation of code. Esbuild-loader is the main reason why WebPack is almost as fast as Vite, the separation of code is similar to Vite, the maximum JS file is about 1MB, and can be optimized.

conclusion

  1. Vite: Vite does have a big advantage over WebPack in terms of ease of configuration and speed. It is very friendly for beginners, and the development experience is arguably the most comfortable of the three.
  2. webpack: The speed of Webpack is a big problem. Although esbuild-Loader speeds up the packaging speed, it is still not as fast as Vite, but its advantage lies in the rich plug-ins and various functions, and does not rely on other tools, when your project needs more plug-ins, there is a high probability that you will use Webpack.
  3. Esbuild: Esbuild is really fast. But other than fast experience is not good, this is an immature tool, expect its function to be perfect.

Personal advice

If it is a new project, it is recommended to use Vite as the packaging tool, you can use or not use the official template, it will not affect your use experience, later as the project becomes more complex, you may need to use Webpack, but I don’t think it is difficult to change at that time. If it’s an old project, you need to think carefully, and maybe optimizing your existing tools is a better option.