Webpack 导入 * 弄乱了摇树？

Question

我在这里读到这个 ​​- https://www.thedevelobear.com/post/5-things-to-improve-performance/ - 从库中导入所有内容将不允许通过摇树来移除它，即使它没有被使用。我不相信这是真的吗？我认为摇树会识别出除了几个功能之外没有使用任何功能，然后删除它们。

There is a really easy way to reduce bundle size by just checking your imports. When performing methods or components from 3rd party libraries, make sure you import only the things you need, not the whole library itself. For instance, if you’re using lodash and need the fill method, import it directly instead of calling it on lodash object:

// Instead of this

import _ from ‘lodash’

let array = [1, 2, 3];
_.fill(array, '🐻');

// Do this

import { fill } from ‘lodash’

let array = [1, 2, 3];
fill(array, '🐻');

Answer 1

使用当前版本的 Webpack (5.3.0)，这是不正确的。使用以下文件:

// src/index.js
import * as a from './modules'

console.log(a.foo)
// Or: console.log(a.baz.foo)

// src/modules.js
export const foo = 'foo'
export const bar = 'bar'
export const baz = {
  foo: 'foo',
  bar: 'bar',
}

网络包输出:

// dist/main.js
(()=>{"use strict";console.log("foo")})();

基于此 Github issue ，即使在上一个答案时也是如此。