Import Cost
Display inline the bundle size of imported JS/TS packages. Requires inlay hints enabled in settings.
How to install
With Forge Super installed, the button above opens the app on this extension, where you press Install. Nothing is installed until you do.
You can also open the Extensions panel in the app and search for Import Cost. The extension's id is import-cost-lsp.
Don't have Forge Super yet? Download it here.
README
From the extension's repository, written by its authors and not by Mentenaz. See the source.
Import Cost for Zed
Display the bundle size of imported packages inline in the editor, powered by esbuild.
Inspired by wix/import-cost for VS Code.
import { debounce } from 'lodash'; 42.1kB (gzip: 14.2kB)
import React from 'react'; 6.3kB (gzip: 2.8kB)
import axios from 'axios'; 13.5kB (gzip: 5.1kB)
import type { Foo } from 'bar'; // skipped (type-only)
import { readFile } from 'node:fs'; // skipped (builtin)
Features
- Shows minified + gzipped bundle size next to each import statement
- Supports ES6
importand CommonJSrequire() - Uses esbuild for fast bundling
- Skips type-only imports, relative imports, and Node.js builtins
- Results are cached for performance
Setup
After installing the extension, you need to enable inlay hints in your Zed settings. Open your settings (Cmd+, on macOS) and add:
{
"inlay_hints": {
"enabled": true,
"show_other_hints": true
}
}
That's it. Open any .js, .ts, .jsx, .tsx or .svelte file with third-party imports and you should see bundle sizes appear inline.
How it works
The extension runs a lightweight LSP server that:
- Parses import statements using the TypeScript compiler API
- Bundles each import with esbuild (minified, tree-shaken)
- Returns the size as LSP inlay hints, which Zed renders inline
The LSP server resolves packages from the project's node_modules, so you need to have your dependencies installed (npm install / yarn / pnpm install).
License
MIT