What if I told you that you can bundle your web app with just one command and no configuration? Sounds too good to be true, right? Well, that’s exactly what Parcel does. Parcel is a zero-configuration web application bundler that automates the entire process of bundling your web app. It supports many languages and frameworks and offers a lot of features such as live reloading, code splitting, and minification. In this blog, I will demonstrate how to use Parcel to create a web app with some of these features. Let’s get going!Installing Parcel.js:
You can install Parcel.js in your terminal using Yarn or npm. Here we are using npm, Below is the command to install Parcel :
npm install –save-dev parcel
We install Parcel as a dev dependency, not a regular dependency. This is because Parcel is only used for development purposes, such as bundling your code, transforming it, and serving it in the browser. It is not needed for production or testing environments, where your code is already built and optimized.
Setup Project:
Now that Parcel is installed, let’s create some source files. Parcel accepts any type of file as an entry point, but an HTML file is a good place to start.
<!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:
npx parcel src/index.html
This starts the server and tells it what file to use as the entry point. As a result, I get the following message in my terminal session:
Server running at <http:
√ Built in 887ms.
Now open http://localhost:1234/ in your browser to see the HTML file you created above.
This server uses live reload and something called hot module replacement (HMR).
Once I have Parcel.js running with its server active, any changes I make to a file will automatically rebuild my app each time the file is saved. To see that you can add an h1 tag in your HTML file and you will see something like this:
$ parcel index.html
Server running at <http:
√ Built in 1.08s.
√ Built in 28ms.
Each “Built…” line represents one build, triggered by a change in content and save.
If I want to use my server, rather than Parcel’s built-in development server, I can use the watch command:
parcel watch index.html
The dist/ folder:
Once I’ve started Parcel.js either in watch mode or via the built-in server, if you look inside your project’s folder, you will see a dist folder. This folder was automatically created with the previous command.
It is an output folder for your bundled code. The dist/ folder contains the following files:
- index.html: This is the HTML file that references your bundled JavaScript and CSS files. It contains a tag that links to your bundled JavaScript file and a tag that links to your bundled CSS file. These tags tell the browser where to find and load your code and styles. Parcel copies this file from your src/ folder and modifies it to include the correct paths to the bundles. For example, if your original index.html file has a tag like , Parcel will replace it with something like http://js.00a46daa.js.
<!doctype html>
<html>
<head>
<title>Parcel Demo</title>
</head>
<body>
<script src=”/js.00a46daa.js”></script>
</body>
</html>
- js.00a46daa.js: This is the bundled JavaScript file that contains all your code and dependencies. The file name includes a hash that changes whenever you make changes to your code. This helps with cache busting and ensures that your users always get the latest version of your code.
- js.00a46daa.js.map: This is the source map file that helps you debug your code in the browser. A source map is a file that maps the bundled code back to the source files and locations. This allows you to see the original code and line numbers in the browser’s developer tools, instead of the minified and transformed code that Parcel generates. Source maps make it easier to find and fix errors in your code.
Features of Parcel:
Code Splitting:
Parcel allows you to divide your web app into smaller chunks of code that can be loaded on demand, rather than loading everything at once. This can improve the performance and user experience of your app, as it reduces the initial loading time and bandwidth usage. Code splitting is controlled by use of the dynamic import() function, which works like the normal import statement or require function, but returns a Promise. This means that the module is loaded asynchronously.
Hot Module Replacement:
HMR updates your app in the browser without refreshing the page. It does that with the help of a file watcher and we socket connection.
A file watcher is a program that monitors the files in your project directory and detects any changes. When a file is changed, the file watcher notifies Parcel, which then rebuilds the changed file and its dependencies.
A web socket connection is a persistent communication channel between the browser and the server. Parcel uses this connection to send the updated files to the browser, which then applies them to the app. This way, Parcel can automatically update your app as you change files without requiring a page refresh.
Production:
When you’re ready to bundle your application for production, you can use Parcel’s production mode. This is done by running the command parcel build entry.js in your terminal. Here’s what happens:
parcel build entry.js
- Command: The parcel build entry.js command tells Parcel to start the bundling process with entry.js as the entry point.
- Production Mode: By using build instead of serve (which is used for development), you’re telling Parcel to bundle your application in production mode. This involves additional steps like minification and optimization that make your application smaller and faster but may take more time to complete. These steps are typically not done during development to keep the build time short for a smoother development experience. Let’s understand minification and optimization:
- Minification: This is the process of removing all unnecessary characters from the source code without changing its functionality. These unnecessary characters can include white spaces, new line characters, comments, and block delimiters which are used to add readability to the code but are not required for it to execute. Minification reduces the size of your code, making it faster to download and load in the browser.
- Optimization: This involves a variety of techniques to make your code more efficient. It can include things like:
- Tree Shaking: This is a term commonly used in the JavaScript context for the removal of dead code. It eliminates code that is not being used to decrease the file size and improve the performance of the app.
- Lazy Loading: This is a strategy where you defer the initialization of an object until it’s needed. This can also help improve the performance of your app and is particularly useful for large applications.
- Bundling: Parcel will then start the bundling process. It will construct the asset tree, and the bundle tree, and finally package everything up into files that are ready to be served. These files will be written to the dist directory by default.
Caching:
Parcel uses caching to speed up the development and production builds of your project.
Parcel caches the information about your project when it builds it, so that when it rebuilds, it doesn’t have to re-parse and re-analyze everything from scratch. This makes the development workflow more efficient and reduces the build time.
The cache folder in Parcel is called d .parcel-cache . You should not push this folder to your version control system (such as GitHub), because it is not necessary and it could cause problems. You can add this folder to your .gitignore file to prevent committing it.
Conclusion:
Parcel is a powerful, efficient, and user-friendly web application bundler that stands out due to its zero-configuration philosophy. Parcel’s unique approach to handling different file types as first-class citizens sets it apart from other bundlers.
Source: hashnode.com
