---
title: Packages, bundles, budgets
description: npm packages vendored as source, bundled at start, held to a budget.
section: Frontend
order: 2
---

# Packages, bundles, budgets

<p class="lead">There is no <code>node_modules</code> and no bundler to set up. A package is fetched once into the app's <code>vendor/</code> and recorded in its <code>sluurp-deps.json</code> — the import map, each version and a hash of every file — and the server bundles everything when it starts.</p>

```sh title="Terminal"
# its sources and its dependencies, into vendor/
sluurp add npm:d3-force@3

# a JSR package, through JSR's npm registry
sluurp add jsr:@std/path@^1

# wanted and latest, as pnpm reports them
sluurp outdated

# also removes what only the old version needed
sluurp update --latest

# checks every file against npm's tarballs
sluurp vendor verify
sluurp remove d3-force

# where the shared store is, and its size; `clear` empties it
sluurp cache
```

- Packages are vendored as source, not as a CDN's build. CommonJS is converted to ES modules with rolldown at vendoring time.
- Types come with the package, its own or DefinitelyTyped's, along with paths for the editor.
- A shared store, keyed by content hash, makes the same package instant for a second app. npm's and pnpm's caches are read when they have the file, and `--offline` works from the caches alone.

## In production

When it starts, the server bundles each page's modules with rolldown. Bundles are code-split and minified, and include workers and `new URL(…)` assets. The result is cached on disk by content and precompressed with brotli and gzip. In development, modules are served one at a time, as written.

## A budget

```json title="budget.json"
{ "first-load-kb": 320, "pages": { "/signup.html": 140 } }
```

`/_sluurp/bundle/report.json` reports how much each page downloads, compressed, before it can run, and flags any page over its budget. Code that only one page needs should be loaded with `import()` from that page.