What is Parcel.js and how it's faster than webpack?

What is Parcel.js and how it's faster than webpack?

Table of Contents


Cool stuff about Parcel

  • It has ~29000 Github stars
  • Known for no config setup
  • The benchmarks :point_down:
BundlerTime
browserify22.98s
webpack20.71s
parcel9.98s
parcel - with cache2.64s

source

Introduction

From webpack official website Taken from official webpack website

Parcel.js is a bundler just like rollup, webpack, browserify but its zero-config/no-config and supports bundling the whole web app not just javascript files. Although few bundlers are only Javascript centered. Bundlers like Webpack, Parcel.js are web app bundlers which includes Javascript, it's variants and the whole ecosystem, Images, Stylesheets, Template engines. The above image from webpack sums up what webapp bundlers are.

Get started

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simplest</title>
  <link rel="stylesheet" type="text/css" href="./styles.scss"/>
</head>
<body>
  <script src="./app.js"></script>
</body>
</html>
// app.js
import main from './main';

main();
// main.js
// import a CSS/SASS/LESS/pug whatever module

export default () => {
  console.log("Ola!!")
}

Make sure you have parcel installed npm install -g parcel-bundler or run npm install --save-dev parcel to install locally.

Now run, parcel index.html, this will compile everything and run a development server for you.

If you have used webpack or any other bundlers you know what it takes to get the setup of this type. The SCSS files are automatically compiled. Everything that's within the entry-point file is compiled.

Don't worry about sass import in the above, Parcel took care of it. Parcel installs dependencies for supported assets automatically along the way. This takes the setup time to rock bottom.

Parcel installing sass automatically when it faced sass files the first time

It hardly took a minute to get the above done. If you remember running sass --watch file:file and sometimes it would be slow while compiling and you had to wait for it or same with the gulp. That's all streamlined in one. And with some mind-blowing benchmarks.

At the end of the article, you will see a tiny todo app using Parcel and Webpack as a bundler and the differences.

Terminology

Everything is an asset in Parcel. Javascript files, HTML, CSS, images but HTML, CSS and javascript files have special support wherein all the dependencies are compiled along the way when imported.

You can see the list of assets that are supported by default with no config needed here. If you have assets that by default are not supported by parcel you can check out the plugin list or create one

Although Parcel is tremendously fast, easy to set up, allowing you to get started with your application code in no time. When compared with webpack it falls short in configuring. What I mean by that is webpack allows you to configure from very start till end and manage/tweak things in between. You have lots of flexibility and can control everything, on top of this Webpack 4 has a no config way of bundling too (But, Parcel is outstanding in this).

In Parcel, though most of the things are supported out of the box you will have to use plugins for assets that are not implemented and things which can be configured in Webpack are scaffolded in Parcel. This might be a problem for developers who want to totally take control of the process. But no worries if you want something like that in Parcel.js you can use the Packager API

Parcel.js in Hashnode browser extensions

The very extensions of Hashnode for Google Chrome and Mozilla Firefox use parcel as the bundler. It is so simple and easy that I got into working on application code in a matter of minutes. Because all I had to do was to configure the development setup was to install parcel. That's it. In situations like these Parcel has a tremendous advantage over other bundlers.

Tug of war.

A tiny todo app in ReactJs on Webpack and Parcel. (This is my first todo app in React.js) Link to the repo

Note: This is not an ideal way to analyze, though this gives a brief idea so as to what differentiates the both.

With Webpack

You know the pain of setting up a webpack config. Although not that bad as everyone seems to tell it is. It is a bit tricky to figure out for beginners who might be starting out with complex JS apps and might not even know what webpack is.

Anyways, after setting up the whole project to handle sass files, dev-server, hmr, babel support here are the insights.


  • It took sometime to setup.
  • Using webpack
  • Using webpack
  • Consequent build ~1.5s

    It would be worth the time if, for this exact project webpack was very needed. But I don't see any problem in using Parcel for the project and taking it to production too.


With Parcel

  • Done in no time, only extra step was to install react packages.
  • Using Parcel
  • Using Parcel for the first time
  • Consequent builds ~380ms
  • image alt

BundlerUncompressed dir size
parcel109.6mb on disk, 28kb, no modules/cache/dist just app src with package.json
webpack72.4mb on disk, 37kb, no modules/cache/dist just app src with package.json

Issues currently with Parcel.js

  1. There are very few major issues that are currently being solved. One of them being support for sass variables github.com/parcel-bundler/parcel/issues/1165. But it is very specific and won't bother your normal direct usage of SCSS files.

My conclusion

In my opinion, Parcel.js truly is a beast, just that the community around it is still growing and many major projects have not yet started using it. It is perfectly fine for some particular situations but if you need fine grain access to every part of the bundling process then you might need Webpack. All in all, I would say give Parcel a try because if you want you can later move to webpack. That's easy but wasting time to setup webpack configs and then shifting to Parcel might be costly. One live example is very own Hashnode browser extensions.

I like both Parcel.js and Webpack. I have started using Parcel recently and pick the one that suits every time I build something.

Some ref & links