✨ Production

When it comes time to bundle your application for production, you can use Parcel's production mode.

parcel build entry.js

Optimisations

This disables watch mode and hot module replacement so it will only build once. It also enables the minifier for all output bundles to reduce file size. The minifiers used by Parcel are terser for JavaScript, cssnano for CSS, and htmlnano for HTML.

Enabling production mode also sets the NODE_ENV=production environment variable. Large libraries like React have development only debugging features which are disabled by setting this environment variable, which results in smaller and faster builds for production.

File naming strategy

To allow setting very aggresive caching rules to your cdn, for optimal performance and efficiency, Parcel hashes the file names of most bundles (according to whether the bundle should have a readable/rememberable name or not, mainly for SEO).

Parcel follows the following table, when it comes to naming bundles. (Entrypoints are never hashed)

Bundle Type Type Content hashed
Any Entrypoint
JavaScript <script>
JavaScript Dynamic import
JavaScript Service worker
HTML iframe
HTML anchor link
Raw (Images, text files, ...) Import/Require/...

The file hash follows the following naming pattern: <directory name>-<hash>.<extension>

Cross platform gotchas

In an effort to optimize production build performance, Parcel will try to determine the number of CPUs available at the machine running the build command so it can distribute the work accordingly. To do so, Parcel relies on the physical-cpu-count library.

Be aware that this module assumes you have the lscpu program available in your system.

Using a CI

If you want to integrate Parcel in your Continuous Integration system (e.g. Travis or Circle CI), you might need to install Parcel as a local dependency.

The instructions can be found here.

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.