Suite of visual analysis tools for the metro bundler
npm install metro-visualizer
š The interactive visualizer for Metro š
A friendly and versatile tool to visualize the bundler's work.
The goal of this project is to provide a suite of analysis tools for bundle sizes and dependencies, while also making Metro more transparent and fun to use for entry level developers.
1. Install the metro-visualizer package in your project.
``
yarn add metro-visualizer
npm install metro-visualizer --save
2. Enable the visualizer in your metro config. For a metro.config.js config file, add the following:
`js`
module.exports = {
// ...
server: {
// ...
enableVisualizer: true
}
};
3. Run metro and point your browser to http://localhost:8081/visualizer.
You can easily toggle options for your builds.
The bundler's performance and activity is shown graphically.
Visualize a bundle's dependency graph. Search for modules to explore the graph incrementally.
Search for all the paths between two modules to better understand your bundle.
Customize the way the graph is displayed.
Follow the Metro guidelines for contributing to the project. There's a utility script to facilitate development. It spawns a Metro server with the visualizer enabled on this package itself. Run it with yarn dev or npm run dev from the metro-visualizer` folder and trigger builds as it is shown in the screenshots above.