!next-tree-shake.md

Tree shaking in NextJS

├── components/
│   ├── index.js
│   ├── c-big.js
│   └── c-small.js
├── pages/
│   └── index.js
├── reexport.js
└── reexport-ns.js

rm -rf .next/ && npm run build && ncdu .next/static/

Compare size of .next/static/ with different pages/index.js

0. Baseline (direct import and usage)

import { CSmall } from "../components/c-small.js";
import { CBig } from "../components/c-big.js";
export default function Home() {
  return (
    <>
      <CSmall />
      <CBig />
    </>
  );
}

Output size: 1.5 MiB

1. Unused direct import

import { CSmall } from "../components/c-small.js";
import { CBig } from "../components/c-big.js";
export default function Home() {
  return <CSmall />;
}

Output size: 372.0 KiB - ✅ SHAKEN

2. Unused named import from barrel

import { CSmall, CBig } from "../components";
export default function Home() {
  return <CSmall />;
}

Output size: 372.0 KiB - ✅ SHAKEN

3. Namespace import from barrel

import * as C from "../components";
export default function Home() {
  return <C.CSmall />;
}

Output size: 372.0 KiB - ✅ SHAKEN

4. Namespace import from barrel via reexport

import * as C from "../reexport.js";
export default function Home() {
  return <C.CSmall />;
}

Output size: 372.0 KiB - ✅ SHAKEN

5. Namespace import from barrel via namespaced reexport

import { C } from "../reexport-ns.js";
export default function Home() {
  return <C.CSmall />;
}

Output size: 372.0 KiB - ✅ SHAKEN

components > index.js

export * from "./c-big.js";
export * from "./c-small.js";

reexport-ns.js

export * as C from "./components";

reexport.js

export * from "./components";