the rules behind treeshaking with an npm module and webpack

If I have an npm package that exports all its components from 1 index.js file:

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


Then if I have another package that consumes this package:

import {A} from 'my-package';


Will the contents of components/B be bundled even though it is never used in the consuming package?

components/B

Is there a way around this?

1 Answer
1

Doing this:

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


Is the same as doing:

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


If you just import {A}... you are telling webpack that what you only cares about is A.

import {A}...

By using named imports, webpack is capable of only bundling the content of A and not bundling B in the final output.

TL;TR: Always use named exports/imports if you want to have an optimised code at the end.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.