Trim your JavaScript dependencies
Bonsai is a JavaScript code analyser that helps speed up your website by focusing on module size and the cumulative size of all downstream dependencies.
The quickest way to get started is to generate a stats file locally on your computer, and then use the online analyser 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.
Using your knowledge of your project, Bonsai will enable you to sort and filter the modules 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 analysing your project.
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.
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.