Revisiting Compilers (Snowpack, Vite and ESBuild)


It has been a while since my last post regarding my chosen compiler and since then I've been experimenting a bit.

I've built an electron app from the Electron Forge template and realised just not how convoluted electron itself is but also the way that electron-forge handles it out of the box.

Electron forge uses what many people know as the most widespread compiler for JavaScript, Webpack. Used in nearly every JavaScript-based application at some time or another including but not limited to Create-React-App (CRA), ElectronForge (as mentioned), NextJS (replaced by their own SWC) and NestJS (my new favourite API framework).

Although widely used it's most well known for its customizability and extensive library of plugins, making it usable for a wide variety of use cases.

What it doesn't excel at on the other hand is ease of use. If you were to start a new webpack project, it would take an extremely long time to get it configured to import all your assets, get styling working, and sometimes get TypeScript to transpile properly.

This is where newer compilers like Vite and Snowpack come in, based on ESBuild they're speedy and because of the use of ES Modules, they're able to optimise imported libraries much better, dramatically reducing bundle size.

As a result, most of my current projects (date of publication) use the Vite compiler which has a handy dandy plugin system much as I mentioned earlier with Webpack. Thanks to the work of community members I was able to make it work with Electron, reloading the primary process when changes are made and using HMR when the frontend has changed.

I wouldn't hesitate to say that it's probably double the speed of the previous webpack-based system.

To be honest there are probably going to be a few posts iterating on this concept due to the rapidly evolving pace of web technologies.