Table of contents
As Akshay Saini says, "Parcel is a BEAST!" It is ACTUALLY a Beast. It makes a Web Developer's Life easy.
I recently joined Namaste React Course by Akshay Saini. He is a Splendid teacher. There is an episode of the Namaste React Course called Igniting Our App. That's where I learned about Parcel and now I am sharing all the things required for you to get started with it.
So first of all, If you’re a web developer you have most certainly made some experience with bundlers like Browserify or Webpack. Those web application bundlers help you to pack the assets of your web application (code, images, packages, etc.) into bundles so that the application can be served easily.
Furthermore, most bundlers can perform many more tasks when building a web application like post-processing of code or structuring your application for supporting lazy loading.
However, today most developers struggle with the complicated configuration of bundlers like Webpack. Parcel, a web application bundler, which has been released a few weeks ago is here to solve the problem. The promise is that Parcel is a lot faster than Webpack or Browserify and that the bundler at the same time is requiring no configuration (in most cases).
For Installing Parcel you have to have node or yarn on your system and then through npm or yarn, you can add Parcel to your project.
For npm,
npm install --save-dev parcel
or through yarn
npm install --save-dev parcel
Project setup
Now that Parcel is installed, let’s create some source files for our app. Parcel accepts any type of file as an entry point, but an HTML file is a good place to start. Parcel will follow all of your dependencies from there to build your app.
src/index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>My First Parcel App</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Parcel has a development server built in, which will automatically rebuild your app as you make changes. To start it, run the parcel CLI pointing to your entry file:
yarn parcel src/index.html
Or when using npm run:
npx parcel src/index.html
Now open http://localhost:1234/ in your browser to see the HTML file you created above.
From the start page of the website you can get an overview of the most important features of Parcel:
Blazing fast bundle times
Parcel uses multiple worker processes to ensure that the compilation process is executed in parallel on multiple cores. Furthermore, Parcel uses a caching mechanism for the file system.Bundle all your assets
Parcel offers out-of-the-box support for common project assets like JS, CSS, and HTML. You do not need to install any plugins to make sure that Parcel is adding those assets to the bundles.Automatic transforms
By default, Parcel is performing code transformations using Babel, PostCSS, and PostHTML.Zero configuration code splitting
Parcel is making sure that the project code is split across multiple bundles if not all assets are needed initially. By using this code-splitting approach not all assets needs to load at once and the user of the web application will experience a faster load. Code splitting is done by default, no extra configuration is needed.Hot module replacement
Parcel is watching for code changes and replaces modules automatically in the browser if needed.Cleaning our Code: Parcel ensures that your code is clean and free from unnecessary spaces, comments, and other non-essential elements during the build process. This helps reduce the size of the final bundle and makes it more efficient for deployment.
Dev and Production Build: Parcel provides separate build modes for development and production. In the development build, you get useful tools like Hot Module Replacement (HMR) for faster development and quicker feedback on code changes. In contrast, the production build includes optimizations like code minification and compression to create smaller and faster bundles suitable for deployment to live environments.
Super Fast Build Algorithm: Parcel is known for its fast and efficient build algorithm. It uses an optimized dependency resolution process and parallel processing to speed up the bundling process, making development and building projects significantly faster.
Image Optimization: Parcel automatically optimizes images during the build process, reducing their file sizes without compromising quality. This optimization helps improve the loading speed of web pages, especially those that contain numerous images.
Caching while Development: While working on your project in development mode, Parcel intelligently caches the built assets. This means that during incremental rebuilds, it can quickly serve the previously generated bundles, saving time and resources.
Compression: Parcel includes compression techniques like Gzip and Brotli to reduce the size of assets in the production build. Smaller file sizes lead to faster loading times, which is crucial for delivering a better user experience on the web.
Compatible with Older Versions of Browsers: Parcel takes compatibility seriously and ensures that the generated code is compatible with older versions of web browsers. It handles modern JavaScript features and transpiles them to older syntax when necessary, so your application can run smoothly on a wide range of browsers.
HTTPS on Dev Machine: Parcel supports serving your development environment over HTTPS. This is particularly useful for testing features that require secure connections, like geolocation or service workers. It helps mimic the production environment more accurately and avoid potential issues when deploying to HTTPS-enabled servers.
Now these are the cool features provided by Parcel.
Parcel for Production Build
If you want to build your project for production you can use the following command:
parcel build index.html
This command creates a dist subfolder where the generated output is stored. You can then use the content of this folder to deploy the application.
You can also specify the folder which should be used for outputting the production build by using the command option -d in the following way:
parcel build index.html -d build/output
The production build process uses minification in order to decrease the bundle size.
In conclusion, Parcel has revolutionized web application bundling with its zero-configuration setup and lightning-fast build algorithm. Its versatility in handling various file types, along with support for HMR during development, streamlines the development process.
For production builds, Parcel's optimizations like minification, compression, and caching ensure highly optimized assets, leading to faster-loading web pages. The image optimization feature enhances user experience by reducing image file sizes without compromising quality.
Parcel's compatibility with older browsers extends the reach of web applications, while its HTTPS support on the development machine prioritizes security.
With its user-friendly nature and active community support, Parcel has become a favorite among developers worldwide. It's an excellent choice for anyone looking to simplify the build process and deliver high-performance web applications.
So, if you haven't tried Parcel yet, give it a go and experience the joy of efficient web application bundling. Happy coding with Parcel!