When I started learning React, Create React App was my go-to for quickly scaffolding new projects. There was a certain simplicity to it which made it easy to set up projects without writing complex configurations. Or in other words, I was too dumb to understand the Webpack and Rollup configurations.
As I started using CRA for more projects, I realized it was not as fast as I wanted it to be. This became more evident in larger projects where I had lots of dependencies. npm was another culprit who ate Giga bytes of storage on my machine and took ages to finish installing the dependencies.
The whole thing had become a mess, so I decided to look for other alternatives. Little did I know I was sitting under a rock for this long. There were so many options to choose from on the tooling side. I felt like I had aged 40 years suddenly. Then I realized time works differently in JS land. It's said that a new framework gets born every time you blink an eye.
To recap, these were the tools I was currently using.
- Create React App for development
- npm as package manager
- jest for running tests
And these were the things I was looking for
A faster build and development system while still having the simplicity of CRA
A faster, efficient package manager which doesn't eat up my storage
A faster test runner/ framework?
Luckily, I've found solutions to all the three problems, and I've to say that my new workflow is "blazingly fast" 🔥
I never felt so alive!
Vite for development
CRA uses Webpack under the hood, creating a "bundle" when we run the npm start command. During this time, Webpack crawls through our project and its dependencies and creates a single Javascript file(in most cases), which contains all the necessary code and starts the development server. The main drawback with the above approach is that Webpack would need to recreate the bundle whenever there's some change in our project code. Optimization techniques like Hot Module Replacement (HMR) try to solve these issues in one way or another. Still, the takeaway here is that as you keep adding 'xstate', styled-components, lodash, or whatever it is you're adding these days, you end up with a boatload of dependencies, and the bundling starts slowing down gradually till it kills the DX making you rage quit your project for good. Jeez, What a nightmare!
Luckily, Vite solves this issue by leveraging native ES Modules in the browser, using more faster bundler like esbuild and doing something called pre-bundling
I don't want to dive into the specifics here, but the basic idea here is that vite improves the dev server start time by dividing the modules in an application into two categories: dependencies and source code. Since the dependencies don't change that often, they can be bundled once and kept in a separate cache. And since everything is served as native ES Modules, we get additional benefits like HTTP caching.
Want more reason to switch to Vite?
Apart from the performance, another reason why I love using vite is its OOTB support for TypeScript, SASS, LESS, SCSS, and a lot more. If you were to use LESS with CRA, you'd end up with solutions like craco and react-rewired, which are honestly not that fun to use. Vite also supports a robust plugin system to add additional loaders.
Even more?
Here's a tweet from the creator himself asking the React team to update the new docs to recommend Vite over CRA
Evan You@youyuxi
Here’s a proposal: the new React docs should recommend Vite over CRA for beginners - or at least recommend a custom Vite based template if ESLint / testing are required (also should use Vitest instead of Jest)15:41 PM - 24 Jun 2022
Seriously, switch to Vite; you won't regret it.
You can get started simply by running.
npm create vite@latest my-react-app -- --template react
pnpm, the npm killer?
node_modules eating up your disk space has become such a meme that even people from the non-tech community know about it at this point. Seriously though, my sheer frustration with npm and node_modules was enough to stop the project I was working on and throw away my old Mac. And when I did buy the shiny new M1 Macbook Pro, I decided to give my project another try. After all, I can't justify my reasoning for spending 2000$ just to watch Netflix, right?
This time I wanted to switch things a bit, and that's when I found pnpm, the long-lost cousin to npm. I was sold the moment I saw the caption on their website
Fast, disk space efficient package manager
I decided to give pnpm a try on my good ol' project.
npm install -g pnpm
cd my-react-project
pnpm install
pnpm start
To my surprise, everything went smoothly and started working without any issues. The installation was fast, and the node_modules folder this time was less chunky.
Again, I won't try to explain the how's and what's here; head over to pnpm site to understand how exactly it solves this problem. But in a nutshell, pnpm avoids cloning copies of the same dependencies multiple times; instead, it keeps a content-addressable store to only keep the changed files of the newer version. This is what makes it fast and efficient.
There are many other features supported by pnpm like workspaces, hoisting, overrides ...
If you're starting a new React project, you can use pnpm and vite together using
pnpm create vite.
vitest
I never had that much of a problem with jest, to be honest. Sure, doing the initial configuration and setting up ts-jest for Typescript projects has been a pain point sometimes, but it was never enough to hate it. The APIs are great, I love writing snapshot testing and unit testing with it. The only reason I moved from jest to vitest is because of vite itself.
Here's a direct excerpt from the vitest site talking about the motivation behind its creation
in a world where we have Vite providing support for the most common web tooling (typescript, JSX, most popular UI Frameworks), Jest represents a duplication of complexity. If your app is powered by Vite, having two different pipelines to configure and maintain is not justifiable. With Vitest you get to define the configuration for your dev, build and test environments as a single pipeline, sharing the same plugins and the same vite.config.js.
This! This is the exact reason I switched to vitest. Since I already started using vite for projects and since vite and vitest go well hand in hand, I didn't need these complicated jest config files and ts-jest just to run my tests. I can run my tests without writing any additional configuration. And it provides first-class support for TypeScript.
To get started with vitest, go to your project and
npm install -D vitest
or with pnpm
pnpm add -D vitest
Once it's installed, update the "test" script in package.json to use vitest instead of jest, and you're done!
I've created a sample repo with React, pnpm, vite and vitest configured. You can check it out here
There, you're back with the cool kids again. But don't get too ahead of yourselves. Better and better things are coming. The only thing you can do is to keep on learning.
"once you stop learning, you start dying" - Albert Einstein
Top comments (0)