Does the entire file of a 'use client' component get bundled, regardless if all exports are used or not?

[jfarris587]

Summary

I’ve noticed that when a file contains the "use client" directive, tree-shaking seems to stop working for its exports.

Suppose I have a client component file with multiple exports:

"use client";

export function Button() { ... }
export function ButtonSecondary() { ... }

Even if I only import one export in a page or another component:

import { Button } from "@/components/ui";

the entire module, including ButtonSecondary, gets bundled into the client-side JS.

From my understanding, "use client" marks the file as a client boundary, so Next.js can’t safely shake unused exports.

I want to verify if this behavior is intentional or if there’s a recommended pattern for keeping tree-shaking working while still using client components. If so, then it seems the recomended path is:

1. never use barrel files
2. split client components into small individual files to avoid the above

Additional information

No response

Example

No response

[icyJoseph]

Have you checked if this is also the case with Turbopack?

[jfarris587]

it also happens with turbopack, yes

[icyJoseph]

Mm interesting, I only see this issue with Turbopack at the moment. Webpack build does drop the unused button.

The app I am testing is just a plain create-next-app, with a client file as you described, and the first button is imported into app/page.tsx

Generally, if there's no sideEffects, the bundler can drop the code, I've seen Turbopack being smarter than Webpack in other situations, but yeah on this one it is not dropping the unused button yet.