Parcel vs webpack

Recently a new bundler called Parcel was released. But what is really the difference between Parcel and webpack?

parcel webpack

Parcel doesn’t require configuration

If you have used webpack before, you know of webpack.config. To create even a minimal project, you need a webpack.config file. In that file you define stuff such as the entry file, output file, whether to use babel and bunch of other things. Usually, it takes quite a lot of time to configure webpack .

Parcel, on the other hand, don’t use a config file. All you do is run a CLI and pass the entry file as an argument and it automatically figures out everything it needs.

Entry points

The cool thing about Parcel is that you can give it your index.html file as entry file, and Parcel figures out by looking at the script tag which JavaScript file it should create.

$ parcel index.html
parcel html
Parcel knows it should use index.js as entry point after reading the index.html file

But you still need to write configs

Even though Parcel doesn’t need a config file, you will most likely still need to write config. If you use React then you must use babel, and you need to configure babel through its .babelrc file.

When using webpack, you can write the babel config in the webpack config file. I think that adds to the confusion. Where should you write your babel config if there are two places to do it? With Parcel there is one place and that’s a better solution I think.

Parcel is quicker

Parcel has multi-core support, which makes it quicker than webpack that doesn’t have multi-core support.

Parcel also uses caching to make the builds even faster. The first time you run Parcel it does some caching, which makes the next build run much quicker. This is a feature that webpack currently lacks.

Benchmarks by Parcel

Parcel has made their own benchmarks. The results look pretty amazing:

parcel benchmarks from parceljs.org
Benchmarks from parceljs.org

More than 2x as quick as webpack! And with cache, it’s 10x as fast as webpack!

But is it that good on a real project? I tried Parcel on the project I am currently working on. Continue reading for the results.

My own benchmarks

First I built a production build with webpack:

webpack build

It took 22.65s.

Then I built it with Parcel (with zero config it was pretty easy to try it out):

Parcel build

The result was even better than the official Parcel benchmark. 7.7s compared to 22.65!

And it’s even faster when I started it the second time because of the caching:

pracel build with cache

1.27s! That’s pretty impressive.

Parcel lacks some features because its new

So far it sounds like Parcel is a superior choice. Is it?

After researching Parcel for a few days I can see that Parcel lacks some of the features that webpack has. Some example of what is lacking:

  • Currently there is no support for Vue components.
  • Parcel has support for code splitting, but you cannot configure it exactly as you please. For example, you cannot only split out the dependencies to its own bundle.
  • No support for source maps
  • No support for multiple entry points

There is an active community behind Parcel and things are improving quickly. This list of non-existing features will soon be obsolete.

Conclusions

I am excited about Parcel because it tries to solve a problem that many people have: too much configuration and too many tools. Parcels will simplify the lives of many JavaScript developers I believe!

Are you ready to try Parcel out yet? I think it’s worth giving it a shot. Check out this step-by-step guide for getting started with React and Parcel

  • Ashish Kapoor

    More features to come on parcel before we can get it in production level environment. Good stuff!

  • What is your `webpack.config.js`?