Introducing Bonsai: an open source Webpack analyzer

Ryan Albrecht | Pinterest engineer, Growth

At Pinterest we know performance is a feature. Countless experiments have shown that when Pinners have a smooth and responsive experience they find more creative ideas for their life. But there’s a problem: as our web app has grown in complexity, the size of JavaScript Pinners download has ballooned. All this code slows down the page, and it’s often there ‘just in case’ a button or feature is clicked.

To help us analyze our code and apply familiar techniques to speed up the site, we built a new tool, Bonsai, a Webpack analyzer that helps reduce dependency trees. Today we’re releasing Bonsai as an open source project, available now on GitHub. In this post we’ll cover the challenges we faced with a JavaScript-heavy site and how Bonsai helps reduce page load times.

How we got here

The story unfolds, as many do, by looking at some dashboards and metrics. At Pinterest we measure the performance and efficiency of our website all the time. We have automated systems and analytics that tell us how fast the site is loading for Pinners around the world, alerts that fire if we go over our budgets and helper widgets that make things fast by default. Our dashboard, however, showed that over time small features were growing larger, and the total amount of JavaScript we sent to browsers was increasing. More JavaScript means longer page load metrics and a worse experience for Pinners.

Code splitting

Code splitting is a well known technique that can improve page load time on JavaScript-heavy websites. Fundamentally, it’s about separating JavaScript code into multiple bundles, which is better for users who only download the JavaScript needed to show the current page.

We use Webpack to build and split our JavaScript bundles at the page level since we switched to React last year. It’s easy with React-router, and pages offer a natural seam for code splitting and asynchronous loading. It also made loading pages much faster! We wanted to realize those same wins again by splitting features out from inside our pages. It was just a matter of finding more seams.

Bonsai, a Webpack analyzer

This is where Bonsai comes in. Bonsai is a Webpack analyzer that reveals big modules by analyzing the dependencies of the modules in a project and tracking the relative weight in bytes they add to the page. It helps trim dependency trees.

As examples, here are some challenges we found in our front end code, and the different approaches we used to resolve them:

• We converted some big advertiser workflows within www.pinterest.com to be lazy-loaded.
• We found pages that were using a single method from a huge helper library and split out that method so we no longer download the whole library.
• We removed React context providers from the page root where there are no children interested in the data.

Some of the things we found required simple changes for a huge impact, while others were bigger projects. We’ve found it’s much easier to remove or defer loading code once you know where the critical bottlenecks are.

You can find the code and documentation on GitHub, and please share your own success stories below, along with issues or pull requests over on GitHub.

Acknowledgements: Thanks to Jason Chalecki, John Mogielnicki and the rest of the Growth team for all the feedback and testing.