---
title: "Heavy library in the first-load bundle (perf/heavy-import)"
description: "A large library imported statically into client code on a route is downloaded, parsed and executed before the page is interactive."
url: http://localhost:4173/rules/perf/heavy-import
updated: 2026-11-11
---

# Heavy library in the first-load bundle

> `perf/heavy-import` is a vetd rule. It flags: Heavy library in the first-load bundle. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `perf/heavy-import` |
| Severity | warning |
| Group | Performance: fonts, images, scripts and bundle |
| Tags | performance, lighthouse |

## Why it matters

A large library imported statically into client code on a route is downloaded, parsed and executed before the page is interactive.

## How to fix it

Load the widget with next/dynamic (below the fold), import only the part you need, or use a lighter alternative (Intl/date-fns for moment).

## Credit

Based on work by:

- [Next.js team](https://nextjs.org): The lazy-loading and bundling guides recommend dynamic import for heavy libraries so they stay out of the first-load bundle.
- [Google Chrome](https://developer.chrome.com/docs/lighthouse/overview): web.dev recommends code splitting to cut JavaScript payloads.

## References

- [How to lazy load Client Components and libraries](https://nextjs.org/docs/app/guides/lazy-loading), Next.js
- [Optimizing package bundling](https://nextjs.org/docs/app/guides/package-bundling), Next.js
- [Reduce JavaScript payloads with code splitting](https://web.dev/articles/reduce-javascript-payloads-with-code-splitting), web.dev
- [Remove unused JavaScript](https://developer.chrome.com/docs/lighthouse/performance/unused-javascript), Chrome for Developers

## See it

Demos in the vetd Lab:

- [Load heavy code on use](http://localhost:4173/lab/react-perf/lazy-load-heavy-code)
- [Load heavy code on demand](http://localhost:4173/lab/web-perf/isolate-heavy-dependencies)

## Related rules

- [`perf/client-page`](http://localhost:4173/rules/perf/client-page.md)
- [`perf/dynamic-ssr-false`](http://localhost:4173/rules/perf/dynamic-ssr-false.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "perf/heavy-import" }`. CLI: `npx vetd explain perf/heavy-import`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`perf/client-page`](http://localhost:4173/rules/perf/client-page.md) · Next: [`perf/dynamic-ssr-false`](http://localhost:4173/rules/perf/dynamic-ssr-false.md)