性能优化-不支持 tree shaking 的环境下如何引入 lodash 让代码体积最少

1,636 阅读1分钟

TLDR

  • 不支持 tree shaking 推荐使用 lodash-es/methodlodash/method,前者体积更少一点。实际项目可随意选择。
  • 支持 tree shaking 使用 import { method } from lodash

引入 lodash 的几种方式

总共有 3 种引入方式,不考虑整包引入 import { drop } from 'lodash',因为其体积自然是最大的。

import drop from 'lodash/drop'; // ① Cherry-pick method
import drop from 'lodash-es/drop'; // ② Cherry-pick method
import drop from 'lodash.drop'; // ③ Per Method Packages

Cherry-pick method

安装包一个,公有代码都在一个包

Cherry-pick method

安装包 lodash-es,公有代码都在一个包

Per Method Packages

安装包 lodash.some-method,公有代码都在不同包

此方式缺点:

  1. 开发体验较差,需安装多包。一个 util 一个 package,需频繁安装。
  2. 官方不推荐,lodash v5 将废弃。甚至推荐专门的 jscodeshift 将其转成单包引入的模式。

实验结果

不支持 tree shaking 时占用体积如下:

image.png

来自 itnext.io: Lodash-es vs individual Lodash utilities: Size comparison

结论:当引入的方法超过 20 个,使用 lodash-es 体积最少。

当支持 tree shaking 如何选择?

自然是使用开发体验最佳的,整包引入 import { drop } from 'lodash',而且数据结果提现,该方式引入体积最少。

Nodejs 端如何选择?

Nodejs 不关注包体积,可以整包引入,开发体验最佳。

我们还有其他选择吗?

当然有,使用 just github.com/angus-c/jus… ?甚至自己写一个团队内公用的轻量级的 lite-lodash,单测覆盖常用场景即可(如何快速配置单测环境见本文),此种体积最少。但是必须有单测哈,因为我们使用lodash就是因为其稳定性、鲁棒性、单测覆盖率足够优秀。

参考文档


img