Code splitting, chunking, and deferred loading are great ways to speed up your site. But you need to know where to use the promise-loader or async import(). If you are using react-router you may have already split your code, which is great. Some of the features on those pages might not be needed on pageload though, and these are the things we can also lazy-load.
There are three properties that we’re looking for in a module that make it a good candidate for lazy loading after the initial pageload:
By default Bonsai sorts modules by their ‘Weighted Module Size’. This is a metric that is calculated by summing the Weighted File Size of each dependency, where each dependency’s Weight is shared between all the dependants. Put another way: it’s a fabricated number. But it’s valuable because it grows quickly when code reuse is low, and when modules have many unique dependencies. This is the best way to find those big modules.
Next you will want to look at the number of dependants that big module has. The fewer the better! These are the places where you’ll have to add lazy-loading, go in and replace the old module with a leaner one, or remove it altogether.
See how we might reason about and analyse a simple project without Bonsai.