What is bundling?

Image resource

Bundling is a tool used to combine multiple files, such as JavaScript, CSS, or images, into a single file or a small number of files. The resulting minified code can be served to the browser as a single HTTP request.

Minification is the process of removing unnecessary characters, such as whitespace and comments, from code. Here’s an example of how bundling and minification can simplify code:

Although the minified code may be less readable, there are several benefits to using bundling:

  • Smaller file size: The minified code can be fetched from the server more quickly, which improves performance.
  • Reduced parsing time: Minified code is often easier and faster to parse than unminified code because it has fewer characters and is more compact.
  • Reduced network traffic: Bundling reduces the number of requests made to the server, which means less bandwidth is required to transfer data over the network.

Why do we need to bundle JavaScript files?

In the best situation, we split our JavaScript into files and call them like this:

Now in the <script> tag, you can use all those dependencies. But what if foo.js depends on bar.js? You must change the order of the scripts ( Why to change the order? If you load bar.js before foo.js but foo.js depends on bar.js, you'll get an error because the browser doesn't know what bar.js is yet ). Hmm, this can become a mess quickly.

Moreover, fetching multiple files over the network can slow down your website. When you make a request for a JavaScript file, the browser has to pause loading the page until it receives the file. This is why bundling is important. Combining all the JavaScript files into a single file reduces the number of requests made to the server, which can improve the performance of your website.

We may have dozens or even hundreds of JavaScript files in a project. Bundling can help to reduce the number of requests made to the server, which can improve the performance of your website.

In Conclusion

Bundling is an important technique for optimizing the performance of web applications. By combining multiple files into a single bundle, you can reduce the number of requests made to the server, improve network performance, and make your code easier to parse.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store