uncovering the secrets of tree shaking when using an npm package in conjunction with webpack

Question

Imagine having an npm package where all components are exported from a single index.js file:

export * from './components/A';
export * from './components/B';

Now consider another package that relies on this initial package:

import {A} from 'my-package';

Would the contents of components/B be included in the bundle even though they are not used in the consuming package?

Is there any way to avoid this unnecessary bundling?

Answer 1

Answer №1

When you do the following:

export * from './components/A';
export * from './components/B';

It is essentially equivalent to:

export class A () ...
export class B () ...

If you simply import {A}..., webpack understands that your focus is solely on A.

Through named imports, webpack can optimize by bundling only the content of A and excluding B in the final output.

In summary: It is advisable to always utilize named exports/imports for a more streamlined code in the end.

Answer 2

When you do the following:

export * from './components/A';
export * from './components/B';

It is essentially equivalent to:

export class A () ...
export class B () ...

If you simply import {A}..., webpack understands that your focus is solely on A.

Through named imports, webpack can optimize by bundling only the content of A and excluding B in the final output.

In summary: It is advisable to always utilize named exports/imports for a more streamlined code in the end.