In this article, we will learn what is parcel.js and why we use it and why it is so powerful.

Before talking about Parcel Js let's first understand about. What are bundlers? Why did it use?

Whenever we make a website or application it is a good practice to keep your code in different small chunks of files. But as we work on production it becomes a very slow process if we have to request all the different files and it can make our application slow. So to remove this issue or to enhance the latency of our application bundlers comes into the picture.

Bundlers

Bundler is a tool that combines all our different files into one single file so that it becomes easy to request all the files at once.

For example, let's say you are making a big eCommerce project inside the project we have to also use a different third-party library to power some of the complex tasks and also we have different files for different things as well. So to manage all these things bundlers can be very useful because they can also maintain all the dependencies which our projects need and auto-update that dependencies and keep our file up to date and error-free.

Parcel

Parcel.js is an open-source bundler. Parcel supports many languages and files types out of the box, from web technologies like HTML, CSS, and JavaScript, to assets like images, fonts, videos, and more. And when you use a file type that isn't included by default, Parcel will automatically install all of the necessary plugins and dev dependencies for you.

Installation

Before we get started, you'll need to install Node and Yarn or npm and create a directory for your project. Then, install Parcel into your app by using npm run:

npm install --save-dev parcel

To execute the file when using npm run:

npx parcel src/index.html

Features

Parcel provides us with various features in our application.

1. Dev Server -> Parcel has its development server which is automatically started when we run the default parcel command. By default, it started the server at http://localhost:1234.If port 1234 is already in use, then a fallback port will be used. After Parcel starts, the location where the dev server is listening will be printed to the terminal.

2. Hot reloading -> As you make changes to your code, Parcel automatically rebuilds the changed files and updates your app in the browser. By default, Parcel fully reloads the page, but in some cases, it may perform Hot Module Replacement (HMR). HMR improves the development experience by updating modules in the browser at runtime without needing a whole page refresh. This means that the application state can be retained as you change small things in your code.

   CSS changes are automatically applied via HMR with no page reload necessary. This is also true when using a framework with HMR support built in, like React (via Fast Refresh), and Vue.

3. Development Target -> When using the dev server, only a single target can be built at once. By default, the parcel uses the development target that supports only new browser versions. So the old javascript syntax won't work. If you need to test in an older browser, you can provide the --target CLI option to choose which of your targets to build. For example, to build the "legacy" target defined in your package.json, use --target legacy.

4. Lazy Mode-> when we are working on a very big project we have many different files so sometimes it becomes very frustrating to wait for your entire app to build before the server starts. You can use the --lazy CLI flag to tell Parcel to defer building files until they are requested in the browser, which can significantly reduce development build times. The server starts quickly, and when you navigate to a page for the first time, Parcel builds only the files necessary for that page. When you navigate to another page, that page will be built on demand. If you navigate back to a page that was previously built, it loads instantly.

5. Caching -> Parcel caches everything it builds to disk. If you restart the dev server, Parcel will only rebuild files that have changed since the last time it ran. Parcel automatically tracks all of the files, configuration, plugins, and dev dependencies that are involved in your build, and granularly invalidates the cache when something changes. For example, if you change a configuration file, all of the source files that rely on that configuration will be rebuilt.

   By default, the cache is stored in the .parcel-cache folder inside your project. You should add this folder to your .gitignore (or equivalent) so that it is not committed in your repo. Caching can also be disabled using the --no-cache flag. Note that this only disables reading from the cache – a .parcel-cache the folder will still be created.

and many more.

Click here to read more about it

As we can see above when we work on a big project we have to separate our code into different chunks. So we have to make bundlers but parcel takes care of this thing also. Parcel uses Code splitting.

Code Splitting

Parcel supports zero-configuration code splitting out of the box. This allows you to split your application code into separate bundles which can be loaded on demand, resulting in smaller initial bundle sizes and faster load times.

Code splitting is controlled by use of the dynamic import() syntax, which works like the normal import the statement, but returns a Promise. This means that the module can be loaded asynchronously.

Tree shaking

When Parcel can determine which exports of a dynamically imported module you use, it will tree-shake the unused exports from that module. This works with static property accesses or destructuring, with either await or Promise .then syntax.

Shared bundles

When multiple parts of your application depend on the same common modules, they are automatically deduplicated into a separate bundle. This allows commonly used dependencies to be loaded in parallel with your application code and cached separately by the browser.

For example, if your application has multiple pages with <script> tags that depend on the same common modules, those modules will be split out into a "shared bundle”. This way, if a user navigates from one page to another, they only need to download the new code for that page, and not the common dependencies between the pages.

If you want to read more about it go to their official site ParcelJS .

I hope you learn something new from my article.

Thank you