Introducing Bonsai: an open source Webpack analyzer
Ryan Albrecht | Pinterest engineer, Growth
How we got here
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.