

The way we were able to expose these dependencies looked something like this: Imagine that we needed both jQuery as well as a main.js and other.js which holds all of our application JavaScript logic. Since we did not have access to a standard way of required dependencies, we had to rely on using global dependencies. Most of the web pages did not need many JavaScript assets.

In the past, the way of exposing JavaScript files was much more straightforward. So in order for your page to load up the first time, these JavaScript files need to be accessible to the application. They can also be external dependencies and libraries you use to build your application like React, lodash, or jQuery. These files can be in the format of internal dependency like the JavaScript files you have written yourself. Your frontend application needs a bunch of JavaScript files to run. What are they exactly? JavaScript bundles But before diving into that topic, we need to get familiar with JavaScript bundles.

But we also need to consider possible ways for improving their performance by doing things like reducing the overall JavaScript bundle size. We need to use these new technologies for better solutions. But with the evolution of JavaScript, the introduction of new JavaScript libraries, like Angular or React, and the concept of single-page applications, the average JavaScript asset size has increased to 357KB in 2016. If we look at historical data, we can see that JavaScript files were on average 2KB in 2010. The lower the size of the JavaScript bundle, the faster the page can be available to the users. But a critical part for improving the frontend performance is to reduce the JavaScript bundle size that should be downloaded via the network. A large part of the frontend loading time is spent on executing JavaScript files as well as rendering the page.
