为什么在使用默认导入而不是命名导入时我的 ES6 webpack 包更大？

Question

我正在使用 OpenLayers 6 并使用此表示法导入部分库：

import { Map, View } from 'ol';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
// More in other files [...]

当运行 npm run dev 我的项目得到一个 9MB 文件。

出于测试目的，我尝试用默认导入替换这些命名导入：

import Map from 'ol/Map';
import View from 'ol/View';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';

令人惊讶的是，它将我的捆绑文件减少到 6MB！它轻了 33%，这是为什么呢？命名导入不应该只导入模块的必需部分吗？

编辑 1

在@Bergi 发表评论后，库可用 here。我使用通过 npm 安装的最新版本：v6.4.2

编辑 2

正如@felixmosh 回答所指出的，运行 npm run prod 似乎缩小了大小差异。我得到 1KB 从 886KB 到 885KB.

Answer 1

摇树，是缩小过程的一部分。在开发包中不应用此过程。

在"production"模式下尝试运行，并比较结果。

Answer 2

不，不应该。这在很大程度上取决于内部库的组织方式。

如果里面使用了require，则lib不会被抖动
如果它在里面使用了import *并且使用了这个包，那么整个*都会被包含
甚至！如果它使用 import {name} from './names' 它仍然可能不会被 tree-shaked

关于 tree shaking 的工作原理和帮助方法，有一篇很好的入门文章：https://webpack.js.org/guides/tree-shaking/

为什么在使用默认导入而不是命名导入时我的 ES6 webpack 包更大？

Why is my ES6 webpack bundle larger when using default imports instead of named imports?

javascript

ecmascript-6

es6-modules