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

【问题标题】：Why is my ES6 webpack bundle larger when using default imports instead of named imports?为什么我的 ES6 webpack 包在使用默认导入而不是命名导入时更大？
【发布时间】：2020-11-21 01:19:36
【问题描述】：

我正在使用 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 的差异。

【问题讨论】：

你能把ol、ol/source和ol/layer模块的内容贴出来吗？或者至少链接库，如果它是开源的？否则我们无法回答问题（仅凭猜测）。
@Bergi 我将您要求的信息添加到我的问题中。
谢谢。这很奇怪，from 'ol'、from 'ol/source' 和 from 'ol/layer' 绝对应该是可摇树的。

标签： javascript ecmascript-6 es6-modules

【解决方案1】：

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

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

【讨论】：

确实，使用 npm run prod 我得到了 1KB 从 886KB 到 885KB 的差异

【解决方案2】：

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

如果里面使用require，lib不会被摇动
如果它在内部使用import *并使用这个包，那么整个*将被包含进来
甚至！如果它使用import {name} from './names'，它仍然可能不会被摇树

有一篇关于摇树如何工作以及如何帮助它的很好的入门文章：https://webpack.js.org/guides/tree-shaking/

【讨论】：

"如果它使用import * inside"，那么它仍然会根据命名空间对象的使用情况使用tree-shaking。
@Bergi 刚刚对 bundlesize 做了一些测试。也许我错了，但如果你至少使用import * as T from 'my-module' 然后使用它中的一些东西T.test()，它不会摇晃。但是，如果你不使用 T，它就会把它踢出去