1. Introduction to Parcel 2
Parcel 2 is a ground-up rewrite of Parcel 1, a fast and scalable zero-configuration web application bundler used by large companies like Atlassian and Adobe.
Hi, everyone. I'm Jasper. I'm a freelance developer and Parcel Core contributor and today I'll talk about Parcel 2. So what is Parcel 2? Parcel 2 is a ground-up rewrite of Parcel 1, but now you might be wondering, what is Parcel 1? Parcel 1 is a fast and scalable zero-configuration web application bundler. This means it's basically like Webpack or Rollup with a big difference in, say, how we actually handle bundling. We try to make it as simple as possible so no configuration We also try to keep it fast and scalable as we're being used in large companies like Atlassian and Adobe.
2. Parcel 2 Features
What makes Parcel fast? Well, we use caching and workers. So we cache every transpolation result from Babel and other transpilers like Typescript, and we also use workers to actually parallelize that work between all your CPU cores. And now you might be wondering, is it really zero config? Well, we actually have a config file, but we try to let you not configure it as much as possible. So we try to have good defaults and our production ready out of the box. So you just create your application. And when you're ready, you can just push it to production and everything will be optimized as it should be.
3. Parcel 2 Import and Optimization
Parcel 2 supports different import scenarios, such as importing JSON files with named pipelines and using query parameters for image optimization. The new version also includes various performance improvements, stable caches, optimized data structures, enhanced code splitting and bundling, improved scope hosting, and better support for monorepos and libraries. To demonstrate the simplicity of Parcel, a React example is provided, showcasing how to add Parcel and React, configure scripts in package.json, and run development and production builds with ease.
For example, we have JSON imports here. So, in one case, you might want a URL of the JSON file. In another case, you might want the text of the JSON file. So, the actual content. And you can use that with named pipelines. For example, URL colon data JSON will return a URL to the JSON file, and text, data, JSON will return the contents of that JSON file. We can also use query parameters, for example, for optimizing images in this case. I've taken an example from our image optimizer, which is URL colon for URL import, and then parcel.JPG is a parcel logo image. And then, you have query parameters. The format is WebP, and the quality is 70%. That's a pretty heavily compressed image.
We've also done a lot more changes than just these few that I've highlighted. We've improved performance more than 2x. We've made our caches stable, so you no longer have to remove the cache now and then. You can leave it there. We've also improved our data structures to use way less memory. This also helped us scale to the size of, for example, Atlassian. We've also improved code splitting and bundling. For example, we have an HTTP2 strategy now, which allows you to have more code splitting than before. We've also made scope hosting stable, so now you can safely use it in production. We've also improved our monorepo and library support. For example, targets can be used to compile an entire monorepo with a single command.
So to show that Parcel is actually really simple, I'm going to go through a little React example. So you first add Parcel and React and React DOM for this example. And then in the package.json, you have two scripts. Devscript, which just starts the index.html entry point, using Parcel. And then the build command, which runs Parcel build and index.html and creates an optimized bundle. So index.html contains a diff with an app ID and a script which references the index file. Index.tsx just contains a simple hello world application. And then if we run Yarn dev, it simply works without any configuration. And Yarn build creates a production ready bundle without any configuration.
This was my talk about Parcel. Thank you for listening.