Keep Your Javascript Bundle Size in Check

Are you a developer who is concerned about the size of newly added libraries? Or do you want to find a culprit in a rather big Javascript bundle?

If you’re like me, then you answered yes to both questions.

In this post I’ll cover a few tools that come in handy for a quick analysis of bundle sizes without changing or ejecting your build architecture.

Understand the cost of an import early.

This extension will display inline in the editor the size of the imported package. It supports tree shaking, so the size should be displayed correctly for a few exported functions.

With this you may spot mistakes like these:

It’s also available for JetBrains IDE, Atom and Vim.

This website lets you search for libraries and display their sizes without the need to install. It shows the size of each version and even suggests alternatives to similar libraries that might be lighter — talking about a new framework or library every week.

You could also drop your package.json file and order it by size to see your biggest libraries. Personally I find this quite fun, but usually I use this tool to check bundle sizes of not-yet-installed libraries.

Like the name suggests you need to build source maps. With modern framework CLIs it’s enabled by default in prod builds.

Useful tool for imported package visualisation in relation to their size. By clicking on the packages, you can further imspect their sizes and children.

If your site is already public you can use Google’s PageSpeed Insight to detect big Javascript bundles.

Bonus: It also includes Javascript files, that are downloaded on runtime from your ad networks, Google Tag Manager and other tools.

Check out this tweet to see the treemap in action:

Simon Wicki is a Freelance Developer in Berlin. Worked on Web and Mobile apps at JustWatch. Fluent in Vue, Angular, React and Ionic. Passionate about Frontend, tech, web perf & non-fiction books.

Related posts:

Desde que me entendo por gente, gosto de ler. Comecei lendo gibis da Turma da Mônica e, depois, avancei para os romances policiais da Agatha Christie. No colégio, tive acesso aos clássicos e, por…

We mostly deal with things we face in everyday life: daily routines and tasks, having to meet the expectations of others, responsibilities and concerns for partners and family members, our needs to…

The internet is becoming increasingly famous. Many users use the internet to interact with others, research, discover new things, and have fun. Web development by top custom software development…