Barrel file and Tree Shaking

问题

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:

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:

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 :)

回答1:

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:

Plugin to improve treeshaking
Side effects webpack option
Used exports webpack option
Move from webpack to rollup. Rollup has first-class tree shaking by default (I don't recommend to do it for large projects).

来源：https://stackoverflow.com/questions/58527907/barrel-file-and-tree-shaking

标签

Webpack

import

tree-shaking