Parcel

Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.
Parcel starts with a great development experience, from starting a new project, to iterating and debugging, and shipping to production. No more fiddling with configuration, or spending hours to keep up with best practices – it just works!
Start with an HTML file. Add a <script> tag. Maybe some CSS. How about TypeScript? SASS? Images? No problem. Parcel works out of the box just as you'd expect.
Parcel supports many languages and file types out of the box, from web technologies like HTML, CSS, and JavaScript, to assets like images, fonts, videos, and more. And when you use a file type that isn't included by default, Parcel will automatically install all of the necessary plugins and dev dependencies for you!
Parcel includes a development server out of the box. Just run parcel index.html to get started.
Need HTTPS? Run Parcel with the --https flag, and it will automatically generate a certificate for you! Or, if you like, you can provide your own.
Parcel also has a built-in API proxy, which can help simulate your production environment.
When you make a change, Parcel automatically updates your code in the browser – no page reload necessary!
Parcel also integrates with React Fast Refresh and the Vue Hot Reloading API to automatically preserve your application state between updates. This gives you instant feedback as you make changes, without taking you out of context.
If you make an error in your code or configuration, Parcel displays beautiful diagnostics in your terminal and in the browser.
Every error includes a syntax highlighted code frame pointing to the exact location where the error occurred, along with hints about how to fix the issue.
Many diagnostics even include a documentation link where you can learn more.
Parcel builds your code in parallel using worker threads, utilizing all of the cores on your machine. Everything is cached, so you never build the same code twice. It's like using watch mode, but even when you restart Parcel!
Parcel's JavaScript, CSS, HTML, and SVG compilers are written in Rust for maximum performance. These are 10-100x faster than other JavaScript-based tools!
Parcel's JavaScript compiler is built on SWC, which handles transpiling JavaScript, JSX, and TypeScript. On top of SWC, Parcel implements dependency collection, bundling, scope hoisting, tree shaking, Node emulation, hot reloading, and more.
Parcel's CSS transformer and minifier is built in Rust on top of the browser-grade CSS parser used in Firefox. It's over 100x faster than other JavaScript-based transformers and minifiers.
Parcel is designed around a multi-core architecture that parallelizes work across all of your cores and takes full advantage of modern hardware.
Transforming individual source files is parallelized, as well as packaging and optimizing output bundles. All of this is completely automatic and does not require any work by plugin authors or other tools that integrate with Parcel.
Everything Parcel does is cached – transformation, dependency resolution, bundling, optimizing, and everything in between. This means the dev server restarts instantly, and the same code is never built twice.
Parcel automatically tracks all of the files, configuration, plugins, and dev dependencies that are involved in your build, and granularly invalidates the cache when something changes. It integrates with low-level operating system APIs to determine what files have changed in milliseconds, no matter the project size.
In development, Parcel can defer building files until they are requested in the browser. This means you only need to wait for the page you're actually working on to build! If your project has many entries or code split points, this can massively reduce dev server startup time.
And when you do request a page, Parcel is smart enough to eagerly build all of the dependencies of that page at once, without waiting for them to be requested as well – no network waterfalls!
Parcel optimizes your whole app for production automatically. This includes tree-shaking and minifying your JavaScript, CSS, and HTML, resizing and optimizing images, content hashing, automatic code splitting, and much more.
Parcel supports tree-shaking both ES modules and CommonJS out of the box! It statically analyzes the imports and exports of each module, and removes everything that isn't used.
Tree shaking even works across dynamic import() boundaries, shared bundles, and even across languages! If you use CSS modules, unused classes will be removed automatically.
Parcel includes minifiers for JavaScript, CSS, HTML, and SVG out of the box! Just run parcel build index.html, and your whole application will be built and optimized automatically.
Parcel supports resizing, converting, and optimizing images! Just pass query parameters for the format and size you need when referencing the image file in your HTML, CSS, JavaScript, etc. and Parcel will take care of the conversion and optimization process.
You can even request multiple sizes or formats of the same source image for different devices or browsers!
Compress your app before you deploy using Gzip and Brotli.
When multiple parts of your application depend on the same common modules, they are automatically deduplicated into a separate bundle. This allows commonly used dependencies to be loaded in parallel with your application code and cached separately by the browser!
Code splitting is also supported for CSS. If you import CSS from your JavaScript, a sibling CSS bundle will be produced and loaded in parallel with the JS bundle.
Parcel automatically includes content hashes in the names of all output files. This enables long-term browser caching, because the output is guaranteed not to change unless the name does.
Parcel also resolves all referenced bundles relative to their parent using a manifest in eac