Bonsai

Trim your JavaScript dependencies

Build Status

Bonsai is a JavaScript code analyzer that helps speed up your website by focusing on module size and the cumulative size of all downstream dependencies.

What Bonsai looks like

Getting Started

The quickest way to get started is to generate a stats file locally on your computer, and then use the online analyzer at https://pinterest.github.io/bonsai/analyze.

You can generate a stats file by running webpack --json > stats.json. Then all you need to to is drag and drop the output file into the online tool.

Taking Action

Using your knowledge of your project, Bonsai will enable you to sort and filter the module to help you identify large modules that might not be needed on initial render. Click ‘Ignore’ to simulate how many dependency bytes would be removed if you defer or remove a given dependency.

Read more about analyzing your project.

Running Bonsai

Once you clone Bonsai, it can run from your filesystem or anywhere you have a webserver. The Create React App guide suggests serve as a static file server, and it’ll work with Bonsai too:

git clone https://github.com/pinterest/bonsai.git
cd bonsai && yarn install && yarn run build
yarn global add serve
serve ./build

See also build options.

Contributing

You can file issues, contribute fixes and new features by submitting pull requests on GitHub.

Execute yarn start to quickly spin up a development server. There are other helpful scripts listed in package.json to build the project for production and prevent accidental breakages.

This project was bootstrapped with Create React App. The most recent guide is right here.