Introduction to Parcel, an easy and fast application bundler!

NicolasBrondinBernard

Minify your project in just a few minutes!

Article published on 29/03/2021, last updated on 10/08/2026

A web application bundler is a tool that allows a developer to minimize the number of dependency files (and therefore the number of http requests) and possibly reduce the overall size of the application.

To do this, the bundler will take the entry point of your application (for example the index.html file) and it will group each dependency of the same type into a single file (for example main.js and main.css).

Depending on its configuration, the bundler can perform other actions, such as transpilation or minification.

In addition to reducing the number of files in your project for deployment, this also allows your application to be compatible with as many browsers as possible, since not all of them support JS modules.

Parcel is therefore a bundler whose advantages are that it is very fast, and can work without any configuration, which is what we are going to discover right after.

If you know Webpack, Parcel is a more recent alternative.

To install Parcel globally, run the following command:

npm install -g parcel-bundler

Now, let's take the architecture of a basic project as follows:

index.html
- src/
-- main.js
-- class1.js
-- class2.js
-- css/
--- main.css
--- theme.css
--- button.css

Taking into account that each Javascript dependency is included with the "import" directive and that each CSS dependency is included with "@import" in their respective 'main' file.

And given the following html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <link rel='stylesheet' type='text/css' href='main.css'>
  </head>
  <body>
    <script src='main.js'>
  </body>
</html>

The only thing left for you to do will be to run Parcel in "production" mode so that it packages your application and minifies your files at the same time, with the following command:

parcel build index.html

And there you go, your project is minified and will only contain three files: index.html, main[.*].js and main[.*].css! The [.*] corresponds to the fingerprint of the file to make the name unique (and avoid caching issues).

Note that the folder will also contain *.map files, but these are not sent by the server; they are used when debugging the minified files.

For more information, I'll let you check out Parcel's official documentation:

Parcel

If you want to minify your code without going through an application bundler like Parcel or Webpack, you can take a look at Gulp, which offers minification plugins!

MealPro sur Unsplash

Finished reading this article?

Our newsletter1 email a week to understand it all

Go further

No spam. Only free content, news, and ever more resources to level up your skills!

Join +1500 developers

No comments yet