Reducing JavaScript Bundle Size

Part One: Measurements and high-level views of strategies

Welcome to part one of a series focused on reducing JavaScript bundle size.

With the emergence of frameworks like AngularJS around 2011 and the popularization of Single Page Apps, usage of JavaScript has exploded on the front end. The average web app is over three times larger than in 2010 alone. With the wide array of JavaScript libraries and frameworks commonly used to develop these web apps, the ability to shrink the size of JavaScript bundles has never been more important.

In this piece, we will be taking a look at:

• What is a JavaScript Bundle?
• How do we measure the effect of our bundle on our users?
• What is TTI?
• How do we break up our Bundle?

Let’s get started!

Javascript Bundles

Let’s first talk about JavaScript bundles. Bundles usual refer to JavaScript and CSS bundles sent from the server to the user’s browser. When we discuss it in passing, the primary focus is typically the size of the initial JavaScript bundle sent to the client to initialize the web app, and how that bundle impacts the amount of time before a user can use the app. However, what…