RFC: on esbuild and friends; vite, snowpack, create-react-app-esbuild, and beyond

[threepointone]

esbuild is a new-ish javscript compiler/bundler that uses Go, tradeoffs, and very good programming, to provide orders of magnitude better performance than other similar players in the ecosystem. Essentially, it uses its own built in parser, avoids exposing many plugin points, strips static types, and throws a bunch of computer science at the problem. It sacrifices some customisability, but those constraints allow it to go far beyond what anything else in open source is currently capable of. That said, there's still a long tail of issues, but I expect these to be worked on and resolved as and when. Some unfinished features that stood out to me:

• full jest support. Specifically, jest.mock() calls need to hoisted above import calls. This is a small feature, but critical.
• React's jsx automatic runtime isn't supported (non-critical now, but will become so later)
• babel macros/localised transforms not possible with plugins (I'll write up a proposal for it, but dunno whether it'll happen)
• support for fast refresh ootb (but can be solved by owning the devx, like vite has.)
• doesn't support all the tsconfig options, we must enumerate them and watch out
• code splitting relies on native esm support
• css code splitting doesn't "work" fully yet
• the minification is fairly simple, not as advanced as something like terser.

There are emerging tools built on top of esbuild that look to provide features like plugin systems and integrations with other tools to enhance the overall developer experience. 2 of the popular options are snowpack and vite.

snowpack is a frontend build tool that leans on ES modules and future facing browser apis for developer experience. For production builds it outputs ES modules which can then pipe into a bundler plugin of choice like rollup, webpack, or esbuild itself. Some unique features are streaming imports, which lets you use third party dependencies without manually installing them locally on your machine, an api making it simpler to use ES modules in a server/testing environment, and others. There's no first class support for workspaces, and it wasn't obvious to me how to configure it to do so (I'm sure it is, but I haven't spent the time on it.)

vite is a tool that's closer in behaviour to something like webpack, but leans heavily on esbuild for performance improvements in development and production. It also provides HMR+Fast Refresh support for development out of the box, and leverages rollup's plugin ecosystem for production builds. It comes with a number of batteries included for stuff like css, environment variables, etc. I also like how it uses index.html as a source of configuration, much like parcel. It also can recognise and resolve workspace references, which is very appealing for modular. Further, vite has a first class apps+libs story.

create-react-app-esbuild is a craco plugin that swaps out parts of create-react-app's webpack pipeline for esbuild. While this means that the performance wins aren't as dramatic as the previously mentioned tools, I've still heard numbers like 30-60% wins in startup and build times. That sounds appealing enough for us to try it out in modular, since we already use craco.

---

I'm not prescribing any specific action items here just yet, but I'm trying these all out in the context of modular fairly soon. That said, I've been convinced that the ecosystem will definitely move towards tooling like this, and it's all probably going to be centred around esbuild.