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.

Setup

Install the metro-visualizer package in your project.

yarn add metro-visualizer

npm install metro-visualizer --save

Enable the visualizer in your metro config. For a metro.config.js config file, add the following:

module.exports = {
    // ...
    server: {
        // ...
        enableVisualizer: true
    }
};

Run metro and point your browser to http://localhost:8081/visualizer.

Overview

Dashboard for triggering builds

You can easily toggle options for your builds.

build-options

The bundler's performance and activity is shown graphically.

build-options

Dependency graph

Visualize a bundle's dependency graph. Search for modules to explore the graph incrementally.

build-options

Search for all the paths between two modules to better understand your bundle.

Customize the way the graph is displayed.

build-options

Development

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.

Current Tags

0.56.4 ... latest (5 years ago)

Metro Visualizer

Setup

Overview

Dashboard for triggering builds

Dependency graph

Development

Current Tags

33 Versions