Parcel's Core Features

What is a parcel?

Parcel is a module bundler. A module bundler is a tool that takes multiple JavaScript or CSS files and their dependencies and combines them into a single, optimized file (or sometimes multiple files) for use in a web application.

Parcel Features :

• Development Server -
  It gives us a development server. By default, it will start a localhost:1234.

• Hot Reloading -
  Parcel automatically rebuilds the changed files and updates your app in the browser. By default, Parcel fully reloads the page, but in some cases it may perform Hot Module Replacement (HMR).

  HMR improves the development experience by updating modules in the browser at runtime without needing a whole page refresh. This means that the application state can be retained as you change small things in your code.

  CSS changes are automatically applied via HMR with no page reload necessary. This is also true when using a framework with HMR support built in, like React (via Fast Refresh), and Vue.

• Lazy Mode -
  In development, it can be frustrating to wait for your entire app to build before the dev server starts up. This is especially true when working on large apps with many pages. If you’re only working on one feature, you shouldn’t need to wait for all of the others to build unless you navigate to them.

• Caching -

  Parcel caches everything it builds to disk. If you restart the dev server, Parcel will only rebuild files that have changed since the last time it ran. 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. For example, if you change a configuration file, all of the source files that rely on that configuration will be rebuilt.

  By default, the cache is stored in the .parcel-cache folder inside your project. You should add this folder to your .gitignore (or equivalent) so that it is not committed in your repo.

• HTTPS -

  Sometimes, you may need to use HTTPS during development. For example, you may need to use a certain hostname for authentication cookies, or debug mixed content issues. Parcel’s dev server supports HTTPS out of the box. You can either use an automatically generated certificate, or provide your own.

• Parcel uses File Watcher Algorithm which is written in C++. Using this watcher Parcel watches every file in your project root (including all node_modules). Based on events and metadata from these files, Parcel determines which files need to be rebuilt.

• Minification -

  Parcel includes minifiers for JavaScript, CSS, HTML, and SVG out of the box. Minification reduces the file size of your output bundles by removing whitespace, renaming variables to shorter names, and many other optimizations.

  By default, minification is enabled when using the parcel build command.

• Tree Shaking -

  In production builds, Parcel statically analyzes the imports and exports of each module, and removes everything that isn't used. This is called "tree shaking" or "dead code elimination". Tree shaking is supported for both static and dynamic import(), CommonJS and ES modules, and even across languages with CSS modules.

There are many other features using parcel, You can refer to Parcel documentation for those.

References : https://parceljs.org/