Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .release-please-manifest.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"packages/bundlecheck": "1.0.0",
"packages/bundlesize": "4.6.0",
"packages/envtools": "4.2.2",
"packages/logger": "1.3.3",
Expand Down
14 changes: 14 additions & 0 deletions packages/bundlecheck/.swcrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"$schema": "http://json.schemastore.org/swcrc",
"exclude": ["test"],
"jsc": {
"target": "es2022",
"parser": {
"syntax": "typescript"
},
"externalHelpers": false
},
"module": {
"type": "es6"
}
}
154 changes: 154 additions & 0 deletions packages/bundlecheck/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
# @node-cli/bundlecheck

![npm](https://img.shields.io/npm/v/@node-cli/bundlecheck?label=version&logo=npm)

A CLI tool to check the bundle size of npm packages, similar to [bundlephobia.com](https://bundlephobia.com/).

## Features

- Check bundle size of any npm package
- Support for specific package versions (e.g., `lodash@4.17.0`)
- Interactive version selection with `--versions` flag
- Bundle size trend analysis with `--trend` flag (bar graph across versions)
- Support for checking specific exports (tree-shaking)
- Automatic externalization of React and React-DOM
- Raw and gzip sizes with configurable compression level
- Fast bundling using esbuild (with pnpm support)

## Installation

```bash
npm install -g @node-cli/bundlecheck
```

Or use with npx:

```bash
npx @node-cli/bundlecheck <package-name>
```

## Usage

### Check entire package

```bash
bundlecheck lodash
bundlecheck @mantine/core
```

### Check a specific version

```bash
bundlecheck lodash@4.17.0
bundlecheck @versini/ui-panel@1.0.0
```

### Choose version interactively

```bash
bundlecheck lodash --versions
bundlecheck @mantine/core --versions
```

This will fetch available versions from npm and let you select one from a list.

### Show bundle size trend

```bash
bundlecheck lodash --trend # default: 5 versions
bundlecheck clsx --trend 3 # custom: 3 versions
```

This analyzes recent versions and displays a bar graph showing how the bundle size has evolved:

```
Bundle Size Trend: clsx
Comment thread
aversini marked this conversation as resolved.
────────────────────────────────────────────────────────────

Gzip Size:
2.1.1 ██████████████████████████████ 331 B
2.0.0 █████████████████████████████ 321 B
1.2.0 █████████████████████████████ 318 B
1.0.4 ████████████████████████████ 308 B
1.0.1 ██████████████████████████ 285 B

Raw Size:
2.1.1 ██████████████████████████████ 527 B
...

────────────────────────────────────────────────────────────
Change from 1.0.1 to 2.1.1:
Gzip: +46 B (+16.1%)
Raw: +108 B (+25.8%)
```

### Check specific exports (tree-shaking)

```bash
bundlecheck @mantine/core "ScrollArea,Button"
bundlecheck lodash "debounce,throttle"
```

### Options

| Flag | Short | Description |
| ------------------- | ----------- | ------------------------------------------------------- |
| `--help` | `-h` | Display help instructions |
| `--version` | `-v` | Output the current version |
| `--versions` | `-V` | Choose from available package versions interactively |
| `--trend [N]` | `-t [N]` | Show bundle size trend for N versions (default: 5) |
| `--boring` | `-b` | Do not use color output |
| `--gzipLevel <n>` | `-g <n>` | Gzip compression level (1-9, default: 5) |
| `--external <pkgs>` | `-e <pkgs>` | Comma-separated additional packages to mark as external |
| `--noExternal` | `-n` | Do not mark any packages as external |
Comment thread
aversini marked this conversation as resolved.

### Examples

```bash
# Check the entire lodash package
bundlecheck lodash

# Check a specific version
bundlecheck lodash@4.17.0
bundlecheck @versini/ui-panel@1.0.0

# Check specific exports from @mantine/core
bundlecheck @mantine/core "ScrollArea,Button"

# Check react itself (without marking it as external)
bundlecheck react -n

# Add vue and svelte as additional externals
bundlecheck some-package --external "vue,svelte"

# Use a different gzip compression level
bundlecheck lodash --gzipLevel 6

# Choose version interactively
bundlecheck lodash --versions

# Show bundle size trend (default: 5 versions)
bundlecheck lodash --trend

# Show bundle size trend for 3 versions
bundlecheck lodash --trend 3
```

## How It Works

1. Creates a temporary directory
2. Installs the specified npm package
3. Creates an entry file importing the package/exports
4. Bundles with esbuild (minified, tree-shaken)
5. Reports raw and gzip sizes
6. Cleans up temporary files

## Default Externals

By default, `react` and `react-dom` are marked as external (not included in the bundle size) since most React-based packages expect these as peer dependencies. This matches how these packages would typically be used in a real application.

To include React/React-DOM in the bundle size calculation, use the `--no-external` flag.

## License

MIT - see [LICENSE](./LICENSE) for details.
51 changes: 51 additions & 0 deletions packages/bundlecheck/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
{
"name": "@node-cli/bundlecheck",
"version": "1.0.0",
"license": "MIT",
Comment thread
aversini marked this conversation as resolved.
"author": "Arno Versini",
"description": "CLI tool to check the bundle size of npm packages (like bundlephobia)",
"type": "module",
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/bundler.js"
}
},
"bin": "dist/bundlecheck.js",
"files": [
"dist",
"README.md"
],
"node": ">=20",
"scripts": {
"build": "npm-run-all --serial clean build:types build:js build:barrel",
"build:barrel": "barrelsby --delete --directory dist --pattern \"**/*.d.ts\" --name \"index.d\"",
"build:js": "swc --strip-leading-paths --source-maps --out-dir dist src",
"build:types": "tsc",
"clean": "rimraf dist types coverage",
"comments:fix": "comments --merge-line-comments 'src/**/*.ts'",
"lint": "biome lint src",
"lint:fix": "biome check src --write --no-errors-on-unmatched",
"test": "vitest run --globals",
"test:coverage": "vitest run --coverage --globals",
"test:watch": "vitest --globals",
"watch": "swc --strip-leading-paths --watch --out-dir dist src"
},
"dependencies": {
"@inquirer/select": "5.0.4",
"@node-cli/logger": "workspace:*",
Comment thread
aversini marked this conversation as resolved.
"@node-cli/parser": "workspace:*",
"esbuild": "0.27.2",
"kleur": "4.1.5",
"semver": "7.7.1"
},
"publishConfig": {
"access": "public"
},
"devDependencies": {
"@node-cli/comments": "workspace:*",
"@vitest/coverage-v8": "4.0.16",
"vitest": "4.0.16"
}
}
Loading