fabiospampinato/banal

On-demand bundle analyzer, powered by esbuild.

Banal

On-demand bundle analyzer, powered by esbuild.

Features

This little terminal app exists because Bundlephobia and bundlejs are pretty cool and useful, but bundling locally and with offline support can easily work more reliably.

• Simple: the way this app works is super simple, it just generates the metadata file for the bundler analyzer in a temporary directory, embeds it inside the bundle analyzer itself, and opens it.
• Secure: postinstall scripts are disabled for security reasons, and only dependencies I personally maintain and esbuild are used.
• Available: unless NPM itself is unreachable, or esbuild can't bundle your modules, this bundle analyzer will always be available.
• Customizable: some important options, like the target platform or the target format, can be configured. Unlike in Bundlephobia where for many modules bundling will just fail.
• Offline support: esbuild's amazing bundle analyzer is embedded within the app, so the analysis can potentially even work if you are offline, if NPM has the modules you want to analyze cached already.
• Sharing support: a single HTML file is generated, specific to the analyzed modules, so it can be shared trivially.

Install

npm install -g banal

Usage

demo.mp4

Some example usages:

# Analyze a single module
banal crypto-sha

# Analyze a single module, at a specific version
banal [email protected]

# Analyze a single module, with the module flag set explicitly (optional)
banal -m crypto-sha

# Analyze a single local module
banal ./src/index.ts

# Analyze a single namespaced module
banal @fabiospampinato/is

# Analyze multiple modules together
banal crypto-sha crypto-puzzle

# Analyze a Node module
banal -p node -m banal

# Analyze a single module with a custom input file
banal -m @fabiospampinato/is -i 'export {isWeakRef} from "@fabiospampinato/is";'

Related

• Banal for VSCode: The official companion extension for Banal, for quickly inspecting the bundle size of npm dependencies.

License

• App: MIT © Fabio Spampinato
• Bundler & Analyzer: MIT © @evanw

banal's Issues

Open npmgraph automatically

• Ref: npmgraph/npmgraph#94

Output in combination with metafile not working

This is a very useful package. One issue that I have:

I tried to run:
npx banal --metafile ./dist/my-app/stats.json --output ./analyze/index.html

This does not work, only --output-analysis seems to work, and also if the folder does not exist, we get an ENOENT error.

Define output location

Right now the tool can "only" generate to a temp folder and then automatically opens in a browser. For our use case it would be nice if we could provide a path where the file should be created (or copied to), and in that case opening in a browser can also be skipped.

--outdir maybe?

Path problems on Windows

As you write this has been written and tested on Mac, so no surprise that Windows paths cause trouble - as usual:

PS C:\Users\Jan\Documents\throwaway\bundle-size-experiments> pnpm banal .\_minimal\dist-esbuild\function.js
Temp path: C:\Users\Jan\AppData\Local\Temp\banal-7f2ffb657261320f458b5458ff2938b8
X [ERROR] Could not resolve "C:UsersJanDocuments\throwaway\bundle-size-experiments_minimaldist-esbuild\function.js"

    input.js:2:51:
      2 │ export * as _382e98417ea29bbdde569b661c183d24 from 'C:\Users\Jan\Documents\throwaway\bundle-size-experiments\_minimal\dist-esbuild\function.js';
        ╵                                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path
  "C:UsersJanDocuments\throwaway\bundle-size-experiments_minimaldist-esbuild\function.js" as
  external to exclude it from the bundle, which will remove this error.

Error: Build failed with 1 error:
input.js:2:51: ERROR: Could not resolve "C:UsersJanDocuments\throwaway\bundle-size-experiments_minimaldist-esbuild\function.js"
    at failureErrorWithLog (C:\Users\Jan\Documents\throwaway\bundle-size-experiments\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1649:15)
    at C:\Users\Jan\Documents\throwaway\bundle-size-experiments\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1058:25
    at C:\Users\Jan\Documents\throwaway\bundle-size-experiments\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1003:52
    at buildResponseToResult (C:\Users\Jan\Documents\throwaway\bundle-size-experiments\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1056:7)
    at C:\Users\Jan\Documents\throwaway\bundle-size-experiments\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1085:16
    at responseCallbacks.<computed> (C:\Users\Jan\Documents\throwaway\bundle-size-experiments\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:703:9)
    at handleIncomingPacket (C:\Users\Jan\Documents\throwaway\bundle-size-experiments\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:762:9)
    at Socket.readFromStdout (C:\Users\Jan\Documents\throwaway\bundle-size-experiments\node_modules\.pnpm\[email protected]\node_modules\esbuild\lib\main.js:679:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:315:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: [Object],
      notes: [Array],
      pluginName: '',
      text: 'Could not resolve "C:UsersJanDocuments\\throwaway\\bundle-size-experiments_minimaldist-esbuild\\function.js"'
    }
  ],
  warnings: []
}

I'll see if I can figure it out and do a PR.

Use with existing metafile?

This project is amazing, but it's missing a small bit that would make it even better for us:

We have been looking for a way to use https://esbuild.github.io/analyze/ via a CLI so we can store the resulting files on disk, and take automated screenshots of them. It seems this project does that, but it also always generates the metafile first. Would it be possible to add an option that metafile can be provided instead of the file to be processed to create the metafile?

(PS: Small path problems on Windows, I will open an issue for that)

Update included Bundle Analyzer with new treemap support

https://esbuild.github.io/analyze/ recently got an update to include a nice treemap:
esbuild/esbuild.github.io@2ead9e4
evanw/esbuild@65b3058

Would be neat if this was also available here.