tessl/npm-rollup-plugin-visualizer

Visualize and analyze your Rollup bundle to see which modules are taking up space

—

Pending

Overview

Eval results

Files

Filter System

Name: tessl/npm-rollup-plugin-visualizer
Author: tessl

Module filtering functionality for selective bundle analysis based on bundle names and file patterns.

import { createFilter, Filter } from "rollup-plugin-visualizer";

Capabilities

Create Filter Function

Creates a filtering function for selective module inclusion/exclusion during analysis.

/**
 * Creates a filtering function for selective module analysis
 * @param include - Patterns for modules to include (if empty, includes all by default)
 * @param exclude - Patterns for modules to exclude (takes precedence over include)
 * @returns Function that tests whether a module should be included
 */
function createFilter(
  include: Filter | Filter[] | undefined,
  exclude: Filter | Filter[] | undefined
): (bundleId: string, id: string) => boolean;

The createFilter function creates a predicate function that determines whether a given module should be included in the analysis. It follows these rules:

If exclude patterns match, the module is excluded (takes precedence)
If include patterns are specified and match, the module is included
If no include patterns are specified, all modules are included by default
If include patterns are specified but don't match, the module is excluded

Usage Example:

import { createFilter } from "rollup-plugin-visualizer";

// Create filter that excludes node_modules but includes specific files
const filter = createFilter(
  [
    { file: "src/**/*.ts" },    // Include all TypeScript files in src
    { file: "lib/**/*.js" }     // Include all JavaScript files in lib
  ],
  [
    { file: "node_modules/**" }, // Exclude all node_modules
    { bundle: "test-*" }        // Exclude test bundles
  ]
);

// Test the filter
console.log(filter("main.js", "src/index.ts"));     // true
console.log(filter("main.js", "node_modules/foo")); // false
console.log(filter("test-bundle.js", "src/app.ts")); // false

Filter Configuration

Filter configuration objects for specifying inclusion/exclusion patterns.

/**
 * Filter configuration object for bundle and file patterns
 */
type Filter = {
  /** Bundle name pattern (glob pattern, optional) */
  bundle?: string | null | undefined;
  /** File path pattern (glob pattern, optional) */
  file?: string | null | undefined;
};

Filter objects can specify patterns for either bundle names, file paths, or both. Patterns use glob syntax via the picomatch library.

Pattern Examples:

// File-only patterns (most common)
{ file: "src/**/*.ts" }          // All TypeScript files in src directory
{ file: "**/index.js" }          // All index.js files anywhere
{ file: "node_modules/**" }      // All files in node_modules

// Bundle-only patterns
{ bundle: "vendor-*" }           // Bundles starting with "vendor-"
{ bundle: "*.min.js" }           // Minified bundles

// Combined patterns (both must match)
{ 
  bundle: "main-*.js",           // Bundle name must match pattern
  file: "src/**/*.ts"            // AND file path must match pattern
}

Filter Usage in Plugin

Integration of filters with the main visualizer plugin.

interface PluginVisualizerOptions {
  /** Inclusion filters - if specified, only matching modules are included */
  include?: Filter | Filter[];
  /** Exclusion filters - matching modules are excluded (takes precedence) */
  exclude?: Filter | Filter[];
}

Filters are applied during the bundle analysis phase to selectively include or exclude modules from the visualization.

Plugin Usage Examples:

import { visualizer } from "rollup-plugin-visualizer";

// Exclude node_modules and test files
visualizer({
  exclude: [
    { file: "node_modules/**" },
    { file: "**/*.test.js" },
    { file: "**/*.spec.js" }
  ]
})

// Only include source files
visualizer({
  include: [
    { file: "src/**" },
    { file: "lib/**" }
  ]
})

// Complex filtering: include source but exclude specific bundles
visualizer({
  include: [
    { file: "src/**/*.{js,ts}" }
  ],
  exclude: [
    { bundle: "polyfill-*" },
    { file: "src/**/*.test.ts" }
  ]
})

// Bundle-specific analysis
visualizer({
  include: [
    { bundle: "main.js", file: "**" }  // Only analyze main.js bundle
  ]
})

Advanced Filtering Patterns

Complex filtering scenarios and pattern combinations.

Exclude Strategy (Recommended):

// Start with everything, exclude what you don't want
visualizer({
  exclude: [
    { file: "node_modules/**" },      // External dependencies
    { file: "**/*.test.{js,ts}" },    // Test files
    { file: "**/*.spec.{js,ts}" },    // Spec files  
    { file: "**/dist/**" },           // Built files
    { bundle: "vendor-*" }            // Vendor bundles
  ]
})

Include Strategy:

// Explicitly specify what to include
visualizer({
  include: [
    { file: "src/**/*.{js,ts,jsx,tsx}" }, // Source files only
    { file: "lib/**/*.js" }                // Library files
  ]
})

Per-Bundle Analysis:

// Analyze specific bundles separately
visualizer({
  filename: 'main-bundle-stats.html',
  include: [{ bundle: "main.js" }]
})

Path Normalization: The filter system works with normalized paths, so patterns should use forward slashes regardless of the operating system. The projectRoot option affects how paths are normalized before filtering.

Install with Tessl CLI

npx tessl i tessl/npm-rollup-plugin-visualizer

docs

plugin-configuration.md

tile.json