Question

我正在从事一些Angular项目，并使用lodash作为助手。我读了很多关于如何以正确的方式导入lodash来减小捆绑包尺寸的文章。但是由于使用lodash链接方法，我的当前实现出现了问题。

return _(items)
  .groupBy(x => x.vote.code)
  .map(items => items)
  .value();

import * as _ from 'lodash';

我读了导入*不好。我的问题是如何导入_(items)，以使导入如下所示？

import groupBy from 'lodash/groupBy';

Answer 1

如果要减小捆绑包的大小，则要避免导入整个Lodash。相反，您可以仅导入所需的功能-false和groupBy。

但是，在这种情况下，您还使用了链接，而确实需要Lodash的全部。您可以使用flow重新编写代码，然后使用functional programming-friendly bundle of Lodash替换链接：

map

下面是两个例子产生相同结果的快速说明：

import {flow, groupBy, map} from 'lodash/fp';

/* ... */

const chainReplacement = flow(groupBy(x => x.vote.code), map(items => items));
return chainReplacement(items)

const {flow, groupBy, map} = _;

//sample data
const items = [
  { vote: { code: "1" }, name: "Alice"},
  { vote: { code: "2" }, name: "Bob"},
  { vote: { code: "1" }, name: "Carol"},
  { vote: { code: "2" }, name: "Dave"},
  { vote: { code: "1" }, name: "Edel"}
];

//using literally the same functions
const groupByCallback = x => x.vote.code;
const mapCallback = items => items.length;

const chain = _(items)
  .groupBy(groupByCallback)
  .map(mapCallback);

const chainReplacement = flow(
  groupBy(groupByCallback), 
  map(mapCallback)
);

console.log("chain", chain.value())
console.log("chainReplacement", chainReplacement(items))

我制作了一些与您使用<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-fp/0.10.4/lodash-fp.min.js"></script>相匹配的数据，但是由于没有意义，因此不得不修改groupBy回调。我认为是因为这只是出于说明目的。因此，我将其交换为map以获取每个组的数量。这不是很有意义，但仅出于说明目的。

Answer 2

如果您只想导入一个功能或一组功能：

import { groupBy } from "lodash";

lodash构造函数的正确导入是什么？

2 个答案: