What is Parcel.js and how is it faster than webpack
Cool stuff about Parcel
- It has ~29000 Github stars
- Known for no config setup
- The benchmarks :point_down:
|parcel - with cache||2.64s|
Taken from official webpack website
Make sure you have parcel installed
npm install -g parcel-bundler or run
npm install --save-dev parcel to install locally.
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.
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.
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.
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.
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.
- Done in no time, only extra step was to install react packages.
- Using Parcel
- Consequent builds ~380ms
|Bundler||Uncompressed dir size|
|parcel||109.6mb on disk, 28kb, no modules/cache/dist just app src with package.json|
|webpack||72.4mb on disk, 37kb, no modules/cache/dist just app src with package.json|
Issues currently with Parcel.js
- There are very few major issues that are currently being solved. One of them being support for sass variables https://github.com/parcel-bundler/parcel/issues/1165. But it is very specific and won't bother your normal direct usage of SCSS files.
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
- Parcel.js website
- Parcel.js Twitter handle
- Companies using Parcel (not every company is listed though)
- [Minimal react app using Parcel.js as bundler](https://github.com/rwieruch/parcel-react
Originally published on Hashnode, Read it here