esbuild VS Rollup

I created this little repo to be very barebones but just enough to get started. Esbuild is lighting fast and it's a great jump point to test out some ideas and just start developing without any headache!

esbuild is a general purpose code compiler and build tool that uses golang builds, it is very fast and 1~2 orders of magnitude higher in performance than the existing js toolchain. It's not an out-of-the-box build tool yet, but with its plugin system we can already do a lot of things.

import { Plugin } from 'esbuild' /** * Automatically exclude all dependencies * Some regular expression syntax of js is not supported by golang, see https://github.com/evanw/esbuild/issues/1634 */ export function autoExternal(): Plugin { return { name: 'autoExternal', setup(build) { build.onResolve({ filter: /. */ }, (args) => { if (/^\. {1,2}\//.test(args.path)) { return } return { path: args.path, external: true, } }) }, } }

But then you see stuff like ESBuild, where the Evan Wallace (the author) tried to write in both Rust and Go, and his Go version was faster. According to him, this was probably because Go runs destructors in a parallel thread, whereas Rust runs them in the same thread (source), among other factors. The same performance could theoretically be achieved in Rust, but it would demand a lot more effort.

Use esbuild as a compiler and backend bundler

Will provide an alternative solution for Windows later. (ref: https://github.com/evanw/esbuild/issues/976)

Esbuild is a Javascript build tool written in Go, which pre-bundles dependencies 10-100 times faster than Javascript-based bundlers.

We did this via the npm threads wrapper and esbuild. We first moved all of our compute code into a new file with minimal imports, called imageCompare.worker.js. We then added a pre-compilation step with esbuild to compile this file into a bundle. We then spawn the worker using this generated file as a blob, and interact with it via the threads promise interface.

Though, if you want to use one, do yourself a favor and give esbuild a try. It is orders of magnitude faster, at the cost of less flexibility.

If you've done web development for any amount of time, there's a good chance you've had to work with tools like Webpack, Rollup, Browserify and other front-end tooling systems. But do you know why we started using them in the first place, and why they are still part of our everyday workflow?

One of the advantages of using Nx over - say CRA or a custom starter template - is that your Nx workspace is evergreen. What do I mean by that: by now we all know how fast the frontend space is moving, and so are the corresponding devtools. Today you might be using Rollup to build your libraries, tomorrow you use swc, vite or esbuild. Same with Webpack. Webpack 5 has been around for a while already, and still, a lot of projects are stuck at v4.

How can I use tree shaking tools (like in Webpack 2 or rollup?I don't want to eject already so seems like I don't really have access to the Webpack configuration.

Vite addresses this problem by providing a development server and a lightning-fast build command. Vite, pronounced /vit/, is French for "quick," and this name describes the goal for this tool. The build command uses Rollup under the hood, which is preconfigured to create highly optimized code. The development server makes use of browser support for ES modules. Hot Module Replacement will instantly load any codebase changes into the browser.

Svelte Native is based on Svelte, and it allows Svelte developers to build native Android and iOS applications. It was initially released in November 2021 by Rich Harris, the Creator of Rollup, the popular JavaScript module bundler.

Nowadays, almost every web developer uses one bundler or another. Webpack is by far the most popular, with Rollup and Vite in second and third, respectively. Currently, Vite is the fastest-growing major bundler, which has been adopted by frameworks like Vitepress, SvelteKit, Astro, and more.

I have recently been looking into rollup and seeing how it differs from Webpack and other bundlers. One thing I came across was that it is better for libraries because of "flat bundling". This is based on a tweet and from a recent PR for React to utilize Rollup.

This also means that whatever build tooling must produce the distribution file with a .cjs file extension. This might necessitate chaining multiple build tools or adding a subsequent step to move/rename the file to have the .cjs file extension (ex mv ./dist/index.js ./dist/index.cjs)3. This can be worked around by adding a subsequent step to move/rename those outputted files (ex Rollup or a simple shell script).

I think Rollup is where the code-splitting is happening so you will need to address the problem there. Here is an ongoing discussion that seems to have some solutions: https://github.com/rollup/rollup/issues/2756

Vite doesn't create itself the bundles. Under the hood, it uses two tools: Esbuild while you're developing, and Rollup.js to create the production bundle.