Webpack 导入 * 弄乱了摇树？

Question

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

有一种非常简单的方法可以通过检查导入来减少包大小。从 3rd 方库执行方法或组件时，请确保仅导入所需的内容，而不是整个库本身。例如，如果您正在使用 lodash 并且需要 fill 方法，请直接导入它而不是在 lodash 对象上调用它：

// 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，即使在上一个答案的时候也不是真的。