Frontend Tools are moving fast, and it can be hard to keep up! In this article, I will give a short description of Webpack, Rollup, Parcel, Vite, TypeScript, SWC, ESBuild, Babel, Terser, Uglify, ESLint, prettier, Rome tools...
What about the performance? Well, the TS compiler (tsc) is also capable of transforming JS/TS code into ES5 but has similar perf to Babel. It's possible to use SWC, esbuild and Babel for TypeScript but it won't check your types. However, it's possible to use these tools and do the type checking with tsc.
I think it's a good transition to speak about ESLint. ESLint is a linter that helps identifying and fixing potential issues with your code. It can be formatting issues but it can also be used to enforce some rules to avoid potential bugs.
ESLint is often compared to prettier because it can be used as a code formatter: you define formatting rules and then use the autofix feature to correct the code, when possible. However prettier has a different approach: you set formatting options and it gets rid of the original styling and reformats everything. It's possible to use prettier to format the code and ESLint to enforce other coding rules! It's actually the most popular option nowadays.
Guess what, people also started to complain that ESLint and Prettier were too slow on big projects. And the new kid in town is Rome Tools. Rome Tools ambitions to be a linter, formatter, bundler, etc. For now, only the Linter and Formatter seems to be usable and clearly the project is a bit too young to be used on production projects. But I've tested their Linter on a big project and for the comparison, ESLint takes almost a minute while Rome takes less than a second. The comparison isn't entirely fair because the lint rules were different though, but it's still impressive.
If during Code Reviews, people make comments on the formatting, please consider setting up a formatting tool such as prettier instead. Same for the lint. Code review should focus on code readability, design, complexity, tests, etc. But anything that can be automated should be.
Before we move on to Frontend Bundlers, a quick word about minifiers. A JS minifier reduces the code length by removing unnecessary code (comments, block delimiters, variables too long, etc.) without altering its functionality. The main goal is to make the website load faster.
There are many minifiers such as terser and uglify. But, because minifying also require to parse the JS, it is actually possible to use esbuild and SWC to minify the code. Here's a benchmark of the main minifiers.
Let's now talk about the frontend build tools, which are meant to make your life easier during development but also to generate the build artifacts that you will host somewhere. I will cover the following tools: Webpack, Rollup, Parcel, esbuild, Vite and Turbopack.
The most popular bundler is Webpack. It is highly customizable, it will bundle your JS files but also your other assets using loaders (CSS, images, etc.), do some tree-shaking and minify everything. It's also a dev server: during the development, you’ll have access to a webserver with HMR and source-map. Webpack is full of features, but the configuration is a bit complex and it's a bit slow. Tools such as Create React App (for React projects) can help to start with a pre-configured webpack configuration.
Rollup is focusing on the bundling part and has a different approach. This article is already big, so here’s a good article on the subject. The tldr is: "Use webpack for apps, and Rollup for libraries".
Parcel is meant to be a zero configuration web application bundler. It has a dev server with hot-reload and everything. This should work great for most projects, I recommend you give it a try. Oh, and it’s based on SWC, so it’s fast!
esbuild is not only a compiler but also a bundler with tree-shaking, source-map, minification, etc. However, this project is young and esbuild is mainly used for the compilation, for now.
More recently, Vercel announced Turbopack. Behind it we can find the creator of Webpack, so it's clearly a serious candidate. And their secret for being faster is also to use tools developed in Rust.
And now, let’s talk about the no-bundlers solutions. I've presented you several bundlers, but I haven't told you why we need them. We need to bundle for production builds when we want tree-shaking, lazy-loading, chunk splitting and support of old browsers... But do we really need to bundle the app during the development phase?
Vite is an ESM-based dev server. The idea is simple: modern browsers now support ESM, so we can actually serve the modules directly to the browser without bundling!
Vite will compile the code using esbuild and they are able to bundle your app using rollup. Even though esbuild could also bundle the app, they decided not to use it.
As you can see, there are many new tools coming up and it's very exciting to see how fast they are. Nevertheless, I would still recommend using tools such as Babel, TSC, Webpack, ESLint and Prettier for most projects. The reason is that they are stable and full of features. Even though they are a bit slow, they do the job.
I've experimented most of the tools I'm describing on side-projects or as a replacement in projects I have at work. I'm impressed by their speed, but I also realized that the time needed to bundle an app isn't only the time needed to transpile the code. I've tested using SWC instead of Babel in a project that takes 5 minutes to be built. Turns out, most of the time was actually spent compressing images through webpack loaders. Using caches was way more efficient.
I know, I've presented a ton of exciting new tools and my conclusion is that they shouldn't be used yet. Let me be clear, frontend tools are evolving so fast that this advice will be deprecated in 6 months. So, follow these tools and watch their adoption and change logs.