Recently a new bundler called Parcel was released. But what is really the difference between Parcel and 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.
$ parcel index.html
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:
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:
It took 22.65s.
Then I built it with Parcel (with zero config it was pretty easy to try it out):
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:
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.
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