Parcel 2: the Automagical Bundler

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.

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.

Parcel 2 has a lot of new features. I'm going to go through a couple of the most large ones and the most interesting ones. So we've revamped our entire plugin system and added a configuration file. So now our plugin system is very different from Parcel 1, as now every step of the pipeline has a different plugin type and interface. So for example, we have transformers which take one type of file and convert it into another type of file. For example, from modern JavaScript to legacy JavaScript, or from TypeScript to JavaScript. We also have, for example, optimizers, which optimize your code or compress it down. For example, we have a Tercer optimizer, which minifies the JavaScript code. We've also added a config file in Porcel 2. The config file isn't actually used to configure anything specific in a transformer or any plugin. It's used to define which plugins should run for a certain file type. As you can see here. For example, this is a TypeScript example where the, for TS and TSX files, the transformer that runs is that TypeScript TSC compiler instead of Babel. And for a validator, we also run a type checker. We've also added targets, which is very useful for things like service site rendering, as you can build a node code and browser code at the same time. But it's also useful, for example, if you still support Internet Explorer without wanting to negatively impact your users that use a modern browser. So you can have two bundles, for example, a modern bundle for Chrome and a legacy bundle for Internet Explorer and other legacy browsers. We've also introduced diagnostics, which is really helpful if you are trying to debug an error and you don't know what's causing it. So, for example, in this screenshot, we imported a file called Babel core instead of the package Babel core. And we suggest the nearest matching packages. For example, in this case, we have a Babel core and a Parcel core. And the one that matches the best is Babel core. That's probably also what you meant. We've also introduced named pipelines which is very useful if you want to have data or JavaScript in different formats.

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.