Loading JavaScript within the context of a single web page used to be simple. We could simply place a couple of <script> tags somewhere within the document's source and call it a day.
Over the years, however, the complexity of our JavaScript has grown tremendously, alongside the demands of our users. Alongside this, our code bases have grown as well. It was, for a period, natural to just keep adding more and more <script> tags. At a certain point, though, this approach falters. Apart from the burden of multiple HTTP requests being made on every page load, this approach also made it hard for programmers to juggle their dependencies. JavaScript was typical, in those days, to spend time carefully ordering <script> placements so that, for any particular script, its dependencies were in place before it itself loaded.
It was not uncommon to see HTML markup like this:
<!-- Library Dependencies -->
<script src="/js/libs/jquery.js"></script>
<script src="/js/libs/modernizr.js"></script>
<!-- Util Dependencies -->
<script src="/js/utils/data.js"></script>
<script src="/js/utils/timer.js"></script>
<script src="/js/utils/logger.js"></script>
<!-- App Widget Dependencies -->
<script src="/js/app/widgets/Nav.js"></script>
<script src="/js/app/widgets/Tile.js"></script>
<script src="/js/app/widgets/PicTile.js"></script>
<script src="/js/app/widgets/PicTileImage.js"></script>
<script src="/js/app/widgets/SocialButtons.js"></script>
<!-- App Initialization -->
<script src="/js/app/init.js"></script>
This approach was expensive from a performance perspective as the browser had to fetch every resource before continuing to parse and render the remaining document. Large collections of inline scripts in the <head> of an HTML document were hence considered an anti-pattern as they would block the user from being able to use the website for a significant amount of time. Even moving scripts to the bottom of <body> wasn't ideal as browsers would still have to load and execute them serially.
Predictably, our increasingly complex applications started to outgrow this approach. Developers needed more performance and a finer level of control over script loading. Thankfully, over the years, various improvements have been made in how we manage dependencies, how we bundle them, and how we then serve our code bases to the browser.
In this section, we'll explore the improvements that have occurred over the years and will seek to understand what the current best practices are, as well.