通过模块减少 Lodash 导入/包大小答案

【问题标题】：Reducing Lodash imports / bundle sizes via module通过模块减少 Lodash 导入/包大小
【发布时间】：2019-02-28 06:08:23
【问题描述】：

所以我正在尝试减少捆绑包的大小，从常见的罪魁祸首之一——Lodash 开始，我一直在关注article，因为显然这并不理想；

所以我开始尝试执行模块导入的基本任务，例如从 import * as _ from 'lodash' 到 import each from 'lodash/each' 的实际使用的模块导入

除了这样做，我得到了 .../node_modules/@types/lodash/each"' has no default export. 的例子，这令人困惑，因为我在那里看到了导出，我有我的 @types 在那里显示一切都应该没问题，但我显然错过了一些空洞的细节。由于我的模块是es2015，我是否必须使用lodash-es？我是否理解这就是为什么将tsconfig 设置为true 中的esModuleInterop 会向我呕吐的原因？我想我只是在寻找我明显遗漏的任何小细节。

Angular 6/CLI

目标：es5

模块：es2015

【问题讨论】：

试试 lodash-es npmjs.com/package/lodash-es，我觉得它的 tree-shaking 效果更好
我仍然不明白为什么有些路过的投票者甚至不解释他们的立场......

标签： angular angular-cli lodash tree-shaking

【解决方案1】：

这是可摇树的导入：

import each from 'lodash-es/each';

正如npm package 所说，它实际上只是原始包的 ES6 模块导出：

The Lodash library exported as ES modules.

Generated using lodash-cli:

$ lodash modularize exports=es -o ./
See the package source for more details.

进一步的解释可以在这里找到：Correct way to import lodash

【讨论】：

那么你会使用 lodash-es 代替 lodash 还是一起使用？ es 只是 lodash 作为 es mods 是有道理的。
lodash 是 lodash-es 的一个依赖。我认为后者只是增加了对类型和摇树的适当支持。删除 lodash 并安装 lodash-es，两者都应该出现在 node_modules 中
我们称它为好。几乎用 lodash-es 将它减半，现在如果我能弄清楚如何修改一个链式方法，例如 _(<param>).last().key;，因为它不会让我像 import * as _ from 'lodash-es' 那样做一对一的导入替换....
哦，只是为了澄清未来的读者*** import { each, find } from 'lodash-es'; 例如将包括整个库，你需要单独做 import each from 'lodash-es/each'; import find from 'lodash-es/find'; 如果你想要摇树受益...