20

Here is an example repository that shows an example of the issue reported in this thread: https://github.com/Eux86/tree-shaking-barrel-test/blob/master/README.md

I'm trying to understand what's the effect of using a Barrel file to export functions and classes from a library project when importing it into another project that use webpack and should be able to treeshake the bundle.

Imagine I have a project:

library

  • index.ts

  • libA.ts

  • libB.ts

index.ts has this code:

export { LibAMain } from 'LibA';
export { LibBMain } from 'LibB';

So I'm using index as a barrel file to export all the functions I'm going to develop in my library.

The second project will be:

library-user

  • index.ts

Index.ts has this code: 

import { LibAMain } from 'library'

LibAMain();

Now: library-user is builded using webpack, which I expect to be able to treeshake the unused libraries in MyLib, but when I look into the generated bundle I see that it contains boot LibA.js and LibB.js, which shouldn't be there:

enter image description here

If I change index.ts to:

import { LibAMain } from 'library/lib/LibA'

LibAMain();

then webpack does its job well and I only see LibA in the final bundle:

enter image description here

TL;DR: How can I keep using the barrel index file and just import everything from 'library' but still have the treeshaking working?

Thank you for any help :)

Eux
  • 392
  • 5
  • 16

1 Answers1

14

It looks like a module problem in your code, not webpack.
tsconfig.json

...
"module": "commonjs",
...

Commonjs modules system doesn't support tree shaking in webpack (only direct imports like you did it above works mylib/libA).
To fix tree shaking in your github repo you should use module: es2015 or esnext in tsconfig.json.

...
"module": "esnext",
...

But you are right - unfortunetely treeshaking is not webpack's best side.
There are several approaches how to shake your tree better:

  1. Plugin to improve treeshaking
  2. Side effects webpack option
  3. Used exports webpack option
  4. Move from webpack to rollup. Rollup has first-class tree shaking by default (I don't recommend to do it for large projects).
nickbullock
  • 5,944
  • 7
  • 25