A closer look at Module Bundlers
Just yesterday, when I sat for 4 minutes staring at the terminal, watching create-react-app setup my new ReactJS project, I thought to myself, why is this thing so slow? Not only that, why is create-react-app slow with everything — the initial load time, how every small change takes a lot of time to load, etc.
After a lot of digging, I found that I was blaming the wrong tool. It was Webpack! Webpack is a module bundler that create-react-app uses under the hood. Before I talk about why Webpack is slow or are there any alternatives that are faster than Webpack, let’s first go through what is a module bundler.
Module Bundlers
If you view the page source of a new React app created using create-react-app, you will see —
There is no static directory or any bundle.js file. Then why is this JS file able to run your webpage? All your React components and their dependencies are put together in one file by the module bundler. This is what Webpack does for you when using create-react-app.
But why do you need a module bundler?
If all the JS files and assets were not put together, this is how the page source would look like —
Here, multiple JS files need to be fetched, increasing the loading time of the page. Also, the developer would need to take care that these files are imported in the right order with their dependencies being included first. Along with JS files, many module bundlers like Webpack also bundle other static assets such as fonts and images in order to load them in the intended order.
Why is Webpack slow?
Maybe we don’t realize often with the few seconds of wait we face with every change made in our React app, but Webpack does get slower with larger applications. Rather than incrementally changing the bundle file, it is rebuilt on every change. Also comes the question — is bundling even necessary?
Webpack was released in 2014 when the major browsers did not support ES modules, i.e., the browser allows you to run a JavaScript app without having to bundle all the files together. Above all, Webpack is written in JavaScript, hence each time we reload our webpage, the Node.js runtime has to run both your application and the module bundler itself to run your webpage.
Alternatives to Webpack
Now that we have gone through the what and why of Webpack, there need to be some module bundlers to use that overcome some shortcomings of Webpack. There are plenty of modern alternatives that bundle code in an efficient manner such as Parcel and Rollup that make use of ES modules. Whereas, Snowpack builds each file individually and caches it for later use; in this way, it can track changes to files and make optimizations. But Vite brings the best of both worlds!
Why Vite?
Vite divides the JavaScript application into dependency modules and application modules. The dependency modules are processed using esbuild which is a bundler written in Go. You can read here why the choice of using Go makes esbuild faster than any other build tool. When in development, the application modules are transformed and served as and when requested by the browser thus optimizing the load time. When used in production, the application modules are bundled and optimized using Rollup using ES modules. And the thing I love about Vite is that the state of your application is preserved while you change your code by using HMR (Hot Module Replacement).
In the recent The State of JS 2021 survey, Vite had the highest developer satisfaction (98%) of all the JavaScript build tools.
Using Vite with React.js
While on Node version 12.2.0 or above, you can create your new React app using Vite —
You can pick from the official templates and then select if you want TypeScript support for your project. There are multiple community templates available on GitHub that come with pre-baked modules and Vite support.
After selecting the React template and installing the Node modules in lesser time than create-react-app, the following scaffold is obtained -
This looks familiar to the create-react-app scaffold but with a new file — vite.config.js.
Here, you can add plugins, configure the build process in a flexible manner. The plugin that comes with the React template is @vitejs/plugin-react which injects import React from ‘react’ in all of your JSX files before exporting them to the browser.
If you want a quick review about Vite, you can watch this concise video by Fireship.
Now that you have had a closer look at the module bundlers that do all of the heavy lifting for you behind the scenes, you can decide the heavyweight that handles your next frontend web application 🚀
