Esbuild Lazy Analyzer

An esbuild visualizer that analyzes lazy-loading of chunks

Installing

npm i -D esbuild-lazy-analyzer

Overview

Many bundlers allow you to use "splitting" to separate bundled code. This cli shows you how well you split using esbuild.

Usage

npx esbuild-lazy-analyzer --metafile <meta.json> --outmeta <processed.json> --outreport <processed.html>

--metafile is required and at least one of the other --out options are also required.

--outmeta

A json file to write with the following structure

type BundleStats = {
  numberOfChunks: number;
  preBundleSize: number;
  bundleSize: number;
  compressionPercentage: number;
  minChunk: {
    name: string;
    size: number;
  };
  maxChunk: {
    name: string;
    size: number;
  };
  averageChunkSize: number;
  fileLeafs: string[];
  chunkLeafs: string[];
  entryStats: {
    [entryPoint: string]: EntryStats;
  };
};

type EntryStats = {
  type: 'inputs' | 'outputs';
  eagerImports: string[];
  lazyImports: string[];
  longestDependencyChain: string[];
  eagerImportSize: number;
};

--outreport

Creates graphs of some of the above stats, and a map of files pre and post bundle.

Example import graph generated by the esbuild-lazy-analyzer cli

Release Notes

Check out the changelog

Issues

If you find the cli isn't giving results you expect with your metafile, attach a link to the repo and your metafile in an issue.

License Information

Includes an MIT license

This project was inspired by esbuild-visualizer