Visualize and analyze your Rollup bundle to see which modules are taking up space
—
Core type definitions for module trees, bundle data, and visualization information used throughout the plugin.
import {
isModuleTree,
VisualizerData,
ModuleTree,
ModuleTreeLeaf,
ModuleLengths,
ModulePart,
ModuleImport,
ModuleMeta,
ModuleUID,
BundleId,
SizeKey,
TemplateType
} from "rollup-plugin-visualizer";
// Internal compression utilities (advanced usage)
import { SizeGetter, createGzipSizeGetter, createBrotliSizeGetter } from "rollup-plugin-visualizer/dist/plugin/compress";
import * as zlib from "zlib";Complete dataset structure containing all information needed for visualization.
/**
* Complete visualization dataset containing module hierarchy and metadata
*/
interface VisualizerData {
/** Data format version number */
version: number;
/** Module hierarchy tree structure */
tree: ModuleTree;
/** Module parts lookup by UID */
nodeParts: Record<ModuleUID, ModulePart>;
/** Module metadata lookup by UID */
nodeMetas: Record<ModuleUID, ModuleMeta>;
/** Environment information (rollup version, etc.) */
env: { [key: string]: unknown };
/** Generation options used */
options: {
gzip: boolean;
brotli: boolean;
sourcemap: boolean;
};
}This is the root data structure that contains all information needed to generate visualizations. It's used internally by the plugin and output by the raw-data template.
Hierarchical tree structures representing the module organization.
/**
* Tree node containing child modules
*/
interface ModuleTree {
/** Node name (directory or bundle name) */
name: string;
/** Child nodes (can be trees or leaves) */
children: Array<ModuleTree | ModuleTreeLeaf>;
}
/**
* Leaf node representing an individual module
*/
interface ModuleTreeLeaf {
/** Module name (file name) */
name: string;
/** Unique identifier for this module */
uid: ModuleUID;
}
/**
* Type guard to distinguish between tree nodes and leaf nodes
* @param mod - Module node to test
* @returns true if the node is a ModuleTree (has children), false if it's a leaf
*/
function isModuleTree(mod: ModuleTree | ModuleTreeLeaf): mod is ModuleTree;The tree structure represents the hierarchical organization of modules, where ModuleTree nodes represent directories or logical groupings, and ModuleTreeLeaf nodes represent individual files.
Usage Example:
import { isModuleTree } from "rollup-plugin-visualizer";
function processNode(node: ModuleTree | ModuleTreeLeaf) {
if (isModuleTree(node)) {
// Process directory/tree node
console.log(`Directory: ${node.name} with ${node.children.length} children`);
node.children.forEach(processNode);
} else {
// Process file/leaf node
console.log(`File: ${node.name} (${node.uid})`);
}
}Detailed metadata about individual modules including sizes and relationships.
/**
* Size measurements for modules in different formats
*/
interface ModuleLengths {
/** Rendered size in bytes */
renderedLength: number;
/** Gzipped size in bytes */
gzipLength: number;
/** Brotli compressed size in bytes */
brotliLength: number;
}
/**
* Module part with size information and metadata reference
*/
type ModulePart = {
/** Reference to module metadata */
metaUid: ModuleUID;
} & ModuleLengths;
/**
* Import/export relationship between modules
*/
type ModuleImport = {
/** Target module unique identifier */
uid: ModuleUID;
/** Whether this is a dynamic import */
dynamic?: boolean;
};
/**
* Complete metadata for a module including relationships
*/
type ModuleMeta = {
/** Module parts by bundle ID */
moduleParts: Record<BundleId, ModuleUID>;
/** Modules that import this module */
importedBy: ModuleImport[];
/** Modules imported by this module */
imported: ModuleImport[];
/** Whether this is an entry point module */
isEntry?: boolean;
/** Whether this is an external module */
isExternal?: boolean;
/** Module identifier (file path) */
id: string;
};These types capture detailed information about each module, including its size in various formats and its relationships with other modules.
Type aliases for unique identifiers used throughout the system.
/** Unique identifier for modules */
type ModuleUID = string;
/** Bundle identifier */
type BundleId = string;
/** Size measurement keys */
type SizeKey = "renderedLength" | "gzipLength" | "brotliLength";Available visualization template identifiers.
/** Available visualization template types */
type TemplateType = "sunburst" | "treemap" | "network" | "raw-data" | "list" | "flamegraph";
/** Array of all available template types */
const templates: ReadonlyArray<TemplateType>;The templates array contains all available template type strings and can be used for validation or UI generation.
Usage Example:
import templates from "rollup-plugin-visualizer/dist/plugin/template-types";
// Validate template choice
function isValidTemplate(template: string): template is TemplateType {
return templates.includes(template as TemplateType);
}
// Generate UI options
const templateOptions = templates.map(template => ({
value: template,
label: template.charAt(0).toUpperCase() + template.slice(1)
}));Internal utilities for calculating compressed sizes of code strings.
/**
* Function type for calculating size of code strings
*/
type SizeGetter = (code: string) => Promise<number>;
/**
* Creates a gzip size calculator with custom compression options
* @param options - zlib compression options
* @returns Function that calculates gzipped size of code strings
*/
function createGzipSizeGetter(options: zlib.ZlibOptions): SizeGetter;
/**
* Creates a brotli size calculator with custom compression options
* @param options - brotli compression options
* @returns Function that calculates brotli compressed size of code strings
*/
function createBrotliSizeGetter(options: zlib.BrotliOptions): SizeGetter;These utilities are used internally by the plugin when gzipSize or brotliSize options are enabled. They're exposed for advanced use cases where custom compression analysis is needed.
Usage Example:
import { createGzipSizeGetter, createBrotliSizeGetter } from "rollup-plugin-visualizer/dist/plugin/compress";
// Create custom size getters with specific compression settings
const customGzipSizer = createGzipSizeGetter({
level: 6, // Custom compression level
windowBits: 15
});
const customBrotliSizer = createBrotliSizeGetter({
params: {
[require('zlib').constants.BROTLI_PARAM_QUALITY]: 4
}
});
// Use with code strings
const code = "function example() { return 'hello world'; }";
const gzipSize = await customGzipSizer(code);
const brotliSize = await customBrotliSizer(code);
console.log(`Original: ${code.length}, Gzip: ${gzipSize}, Brotli: ${brotliSize}`);Install with Tessl CLI
npx tessl i tessl/npm-rollup-plugin-visualizer