What Is Bundle Size and How to Improve It

When shipping your app to production, you use build tooling to create bundles. They resemble the code you’ve written, but in an optimized form. In simple terms, it is the "stuff" you transfer to the client browser so your app can be interpreted. The initial chunk of javascript code your application needs to get started is called the main bundle. The size of the main bundle determines how long it will take for users to interact with your application. No one wants to use an app that takes forever to load.

By default, every code you write will end up in the main bundle. Some of it is needed, some is not. Fortunately, there are plenty of options and techniques to choose from in order to analyze and improve the bundle size of your application. Together, we will uncover dos and don’ts as well as best practices to provide you with a nice overview of possibilities to optimize your bundle. You will be introduced to tooling that supports you in uncovering potential issues. Furthermore, we will discuss lazy-loading and other optimization techniques.

At the end of the session, we’ll also briefly discuss the topics of compression, assets, fonts, and other utilities to help you see optimization opportunities.

Vorkenntnisse

• Basic SPA framework experience (React, Angular, Vue, …).
  
• No extra knowledge on the topic required.

Lernziele

• Become familiar with the tooling to battle the application size.
  
• Identify areas of opportunity for shipping less JS in your application.
  
• Understand the principles of what JS bundles are and how they are built.
  
• Be more comfortable exploring what is shipped to users.