使用 npm 模块和 webpack 进行树摇晃背后的规则

Question

如果我有一个从 1 个索引导出其所有组件的 npm 包.js文件：

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

然后，如果我有另一个使用此包的包：

import {A} from 'my-package';

即使components/B的内容从未在消费包中使用，它是否会被捆绑？

有没有办法解决这个问题？

Answer 1

这样做：

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

与执行相同：

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

如果你只是import {A}...你是在告诉 webpack，你只关心的是 A。

通过使用命名导入，webpack 能够只捆绑 A 的内容，而不在最终输出中捆绑 B。

TL;TR：如果您希望在末尾有一个优化的代码，请始终使用命名的导出/导入。