Member-only story
3 Libraries I Use in Most JavaScript Frontend Projects
Boost the performance of your web apps
I use a 2019 Macbook Pro, and despite the machine being a developer’s beast, I’m tired of staring at the spinning wheel during work hours.
When the hot-reload gets slow, the mac lags and requires me to do housekeeping frequently. Eventually, I played across a few libraries which became my savior — and I now use them in most of my frontend JavaScript projects.
1. ViteJS
I took over a legacy React project last month, and it has a lot of duplicated and redundant code.
The project was using Parcel 1 as a bundler and it took a long while to start and hot-reload. Even worse, the cache consumed my~500MB disk space! I didn’t notice it until I was running out of space. It has over 500 lines in routes.tsx every time I need to find the respective file I need to do Find in routes.tsx. Troublesome! Later I will show you how I automatically generate routes, from over 500 lines to 50 lines!
I decided to use Vite instead because it makes me feel like I am the fastest developer alive!
So the question here is:
Why ViteJS?
Imagine you are coding for a large-scale project, it could take up to minutes to spin up for the dev server, and for Hot Module Reload (HMR), sometimes it takes a couple of seconds to be reflected in the browser! Both of these issues are affecting developers’ mood and productivity.
Some dependencies are too large to process. Vite is using esbuild to pre-bundles the dependencies. Esbuild is written in Go and compiles to native code, so it compiles 10x — 100x faster than JS-based bundlers.
When you are editing non-plain JavaScript files, it won’t load all the source code simultaneously. This is one of the best parts of ESM, code-splitting!
