What you need to know about Parcel 2

Bundling JavaScript files is one way to reduce the number of server requests for JavaScript files. It achieves this by combining numerous JavaScript files into a single file, resulting in fewer page requests and improved website performance and user experience.

Before the advent of module bundling, you normally had to have separate <script> tags for each module, so the browser had to load each script one by one, causing longer page load times.

There are many reasons bundling is important, now more than ever:

• HTTP1 can only handle a limited number of requests on a single connection. Making connections for each asset would sabotage performance
• Browsers may or may not be able to run the code we write, such as TypeScript and CoffeeScript. Bundlers can simply transpile these codes into bundles
• Bundling minimizes page size by removing unnecessary code and minifying the code

In this post, we’ll look at the JavaScript bundling tool Parcel, specifically its latest version, Parcel 2, which includes a slew of new features targeted at helping developers build faster websites and enhancing the overall user and developer experience.

There are alternative tools, such as webpack and snowpack, but what sets Parcel apart is how simple it is to integrate and use in your project with zero configuration.

What’s new in Parcel 2?

The Parcel team announced the stable version of Parcel 2 (v2.0.0) on 10 September 2021, and it came with a lot of excitement. It still features the zero-configuration experience you know and love from Parcel 1, while also making it scalable and extensible to projects of any size and complexity.

It also offers several new features, such as automated differential bundling via native ES modules, an all-new plugin system, tree shaking enablement by default, and much more.

Parcel 2 has been in the works for three years, and it’s essentially a full remake of Parcel from the ground up. Its new Rust-based JavaScript compiler claims a 10x gain in build performance.

Here’s what you need to know.

Parcel 2 offers an all-new plugin system

Parcel 2 includes a complete overhaul of the entire plugin system, as well as a configuration file added by the Parcel team. The config file isn’t used to configure anything specific in any plugin; instead, it’s used to specify which plugin should be used for certain file types.

For example, the transformer plugin can be set to use the TypeScript-tsc compiler instead of using Babel for TypeScript files.

From transformers, which take one file type and convert it to another, such as modern JavaScript to legacy JavaScript or TypeScript to JavaScript, through optimizers, validators, and so on, each stage of the pipeline has its own plugin type and entry phase. Here’s a complete list of the plugin types.

This makes Parcel fully extensible and allows it to scale from small side projects to massive production applications with complex build requirements.

Tree shaking is now enabled by default in Parcel

Tree shaking is now enabled by default in Parcel 2, with support for ES modules, CommonJS, dynamic imports, and CSS modules, and the tree shaking mechanism has been greatly enhanced.

Parcel 2 also generates source maps for tree-shaken bundles, which has been a constraint and a major difficulty since the initial tree shaking release. Because tree shaking does not simply concatenate files in a linear method, it proved challenging to appropriately incorporate source maps.

Additionally, Parcel shows improved and more thorough error warnings, including code frames for errors like importing a non-existent module export or accessing an unknown symbol, among others.

Massive performance improvements

JavaScript compilation was the slowest aspect of Parcel in previous iterations of the Parcel bundler.

Serializing large JavaScript abstract syntax trees (ASTs) to send across threads was particularly slow, and the JavaScript garbage collector was put under a lot of strain. Furthermore, because JavaScript code must be compiled by the engine each time it is run, it is slow to start up.

As a result, the Parcel team made use of the speedy web compiler (swc) compiler. swc is a TypeScript/JavaScript compiler developed in Rust that claims to be 20x faster on single thread executions and 70x quicker on four-core benchmarks than the Babel JavaScript compiler.

When a browser list is set, swc also replaces Babel by default for transpilation, as well as compiles JSX and TypeScript and offers React Fast Refresh.

Parcel offers automatic differential bundling via native ES modules

Differential bundling is the concept of sending various copies of your code to different targets and letting the browser decide which one to download.

Modern browsers support syntaxes such as classes, arrow functions, async/await, and more, in addition to import and export syntaxes.

Instead of transpiling modern syntax into older JavaScript versions, shipping it can reduce bundle sizes and improve load times.

For current browsers, Parcel 2 now automatically generates native ES modules, as well as fallback classic scripts for older browsers. By shipping modern syntax rather than transpiling to ES5, drastically reducing bundle sizes for the vast majority of users.

Automatic code splitting in Parcel

Out of the box, Parcel enables code splitting without needing configuration. This allows you to break up your application code into distinct bundles that can be loaded and cached in parallel, resulting in reduced initial bundle sizes and faster load times.

The dynamic import() syntax, which functions as a regular import statement but returns a promise, is used to regulate code splitting. This indicates that the module can be loaded asynchronously.

Here’s an example from Parcel that shows how you might use dynamic imports to load a subpage of your application on-demand:

//pages/index.js:

import("./pages/about").then(function (page) {
  // Render page
  page.render();
});

//pages/about.js:

export function render() {
  // Render the page
}

Because import() returns a promise, you can also use async/await syntax:

//pages/index.js:

async function load() {
  const page = await import("./pages/about");
  // Render page
  page.render();
}
load();

// pages/about.js:

export function render() {
  // Render the page
}

Image resizing, conversion, and optimization in Parcel 2

Parcel comes with an image transformer that lets you resize photos, convert them to a new format, and minimize file size by adjusting the quality. This may be done with query parameters or a configuration file when referencing the picture.

In production mode, Parcel now automatically enables lossless image optimization for JPEGs and PNGs. This decreases the size of images without compromising their quality. It can make a startling difference depending on the supplied images.

Better diagnostics

Parcel now contains enhanced error reporting when it is unable to locate a module that you have mentioned. This contains a beautiful syntax-highlighted code frame stack, hints, and even documentation links that show you where the fault occurred, as well as any intermediate files that contributed to the problem.

Conclusion

The latest version of Parcel includes a slew of new and enhanced features aimed at improving website performance and providing developers with ready-to-use tools from the toolbox.

In this post, we discussed some of the noteworthy features included with the current edition. Visit the official documents to view the announcement, which includes all of the exciting new features and upgrades.

If you are looking to upgrade an existing project from Parcel 1 to Parcel 2, you should check out the migration guide — it’s as simple as updating the dependency in your package.json!