Getting started with Parcel Js v2
Tags: parcel, webpack, javascript, bundler
Published: 2022-04-18 13:07:28

## What is Parcel Js?

**Parcel Js** is a code compiler for our website or application that gathers all our code and generates a new collection of files usually in a dist folder. With Parcel Js we can minimize our JavaScript, CSS and HTML, resize and optimize images, content hashing, automatic code splitting and much more.

### Parcel vs Webpack, Rollup, and Browserfly

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9d6hzqg5am4sr7oqeya.jpeg)

---

## 1 Initial folder structure

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gggb58muku7ozvmh82g.png)

## 2 Parcel Installation

`npm i parcel --save-dev`

- We are using the --save-dev or --D flag to install it as a development dependency, since it is a developer tool.

`npm init -y`

- Configuration of the command to start the compilation process.
We add to package.json

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jp7ojmayq6w9bxwh2y0a.png)

## 3. Code Preparation

Our entry point is going to be the index.html file, since it will be the first file to be read by the browser. In the same way, we edit the src/index.html file and place a base HTML by typing ! and pressing TAB, we also add an h1 inside the body:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itby1k8ta5rquwvl6pdk.png)

We link the .js and .css files, adding the corresponding HTML tags, just before the </head>. Our <head> would look something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4yx479d3tkj60l5z2al.png)

### 3.1 Start your build process

Run the build process with npm run dev or any command configured in the package.json file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py4xzx2tqtd6i9atq6av.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52gipzngbrtgn3hzyaiw.png)

We will finally get something like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofcunk8yh1tedto4coxc.png)

We add some styling

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pxhuxu99ntu38aavfud.png)

And we are all set to build our first site with Parcel JS

## 4. How to optimize images with Parcel Js?

We add images in our index.html, along with some more styles


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6h4rgkir198yu7rtro7.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrjhquoauy499f9bmfel.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff29l2d28dbf8892r1cw.png)

We will get this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs9x30y3krqfz3tvdr5b.png)

In the developer tool we can see that one of our images weighs 114kb

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vour15zcaauf7qhkkquo.png)

If we want to optimize our website we need to convert that image in a format like webp, then we do this

We make a change in the src attribute of the images adding "?as=webp".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hycquf4ycrmshjfxrars.png)

Automatically a new package will be installed

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/860ket47jkiw4c6pblsf.png)

Finally we can see a big change in the size of the images we go from 114kb in one of them to no more than 53kb.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2g2uzlwnkqr62f3kmz6p.png)

But this is not only there, if we know the size we want to use in the images we can add more parameters to the above as "&width=300&height=300" with this the images will now have the dimensions that we pass and we will get a lower weight.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6izdkax75jfgip4y0plz.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsb6xhccyw6uu1iwqiv2.png)


## And if we go further, and we want to lazyload?

Well known packages like Lozad.js or LazyLoad will help us. In this case we will use Lozad.js we install it: `npm install --save lozad`.

Because we need to change the src attribute to data-src, we need to install one more thing: `npm i -D parcel-transformer-html-datasrc`, this needs to add an additional configuration, we create the `.parcelrc` file in the root of our project adding what is shown below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t78yjzum51phm1fmezxy.png)

Since now if we will add some javascript to initialize lozad.js, we must add the attribute `module="true"` in our script inside `head`.

Lozad also needs a class in our images `lozad` and as already said change the `src` attribute to `data-src`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5th0tc30xmfk7las70l1.png)

And so we have lazyload with our images optimized using Parcel JS.

If you made it this far, thanks for reading. I have added a repository with everything done in this post. [Repository](https://github.com/Diarpu/parcel-boilerplate)