2023 前端是否还需要 lodash ？

欢迎大家来到IT世界,在知识的湖畔探索吧!

大家好，很高兴又见面了，我是”高级前端进阶“，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

欢迎大家来到IT世界,在知识的湖畔探索吧!

高级前端进阶

前言

Lodash 是一个 JavaScript 库，它使用函数式编程范式为常见的前端编码提供一系列实用函数集合。 Lodash 可以帮助开发者编写更简洁、更易于维护的 JavaScript 代码，包含用于简化字符串、数字、数组、函数和对象编程的工具。

按照惯例，Lodash 模块映射到下划线字符。比如：

const _ = require('lodash'); const _ = require('lodash/core');

欢迎大家来到IT世界,在知识的湖畔探索吧!

1. lodash的使用现状？

NPM&Github累计数据

根据最新的NPM统计数据，lodash的周下载量达到了惊人的40,660,822。Github上star达到55.6k，fork数也达到了6.8k，项目引用量达到数百万，是千万开发者对lodash的一个肯定。

lodash的热度数据

从上图可以看出，最近lodash的搜索热度目前已经有明显的下降趋势。在未来的几年，我们有理由相信，更多的开发者将逐步从lodash迁移。

数字代表相对于图表中指定区域和指定时间内最高点的搜索热度。热度最高的字词得 100 分；热度是前者一半的字词得 50 分；没有足够数据的字词得 0 分。

2.2023年还需要 lodash 吗？

转译器、编译器、构建工具等试图以不同的方式解决文件打包的大小问题。例如 webpack 使用 tree shaking 来识别 Dead Code。 但是 lodash 比较特殊，使用loadash的项目经常会带来打包代码的体积激增。 即使像 .get/.cloneDeep这类简单的方法也会导入大量代码。

lodash的打包依赖文件很大

lodash集成了100+工具方法，随着ES6、Babel等编译工具的出现，很多方法可能已不再需要。 随着时间的推移，一旦使用旧版浏览器的用户迁移到新版本，可能会是lodash的末日。

3.解决 lodash 代码爆炸问题

3.1 通过 lodash/* 或 lodash.* 导入需要的函数

欢迎大家来到IT世界,在知识的湖畔探索吧!const _ = require("lodash"); //将引入 lodash 基础的典型库导入 const merge = require('lodash.merge'); // 导入你需要的具体工具 const get = require("lodash/get"); // 从 lodash 基础库中导入特定工具

3.2 使用>ES6的原生方法替换lodash

数组合并：

let oneStooge = ["Moe"]; let twoStooges = ["Larry", "Curly"]; // Both create ["Moe", "Larry", "Curly"] let threeStoogesLodash = _.concat(oneStooge, twoStooges); let threeStoogesVanilla = [...oneStooge, ...twoStooges]; // 使用rest替代lodash

数组打平：

欢迎大家来到IT世界,在知识的湖畔探索吧!let sonicCharacters = [ "Sonic", "Tails", "Knuckles", ["Amy Rose", "Shadow", "Dr. Eggman"] ]; // Both return: // ["Sonic", "Tails", "Knuckles", "Amy Rose", "Shadow", "Dr. Eggman"] let sonicCharactersFlatLodash = _.flatten(sonicCharacters); let sonicCharactersFlatVanilla = sonicCharacters.flat();

数组复制：

let batmanLyrics = ["na", "na", "na", "na", "na", "Batman!"]; // Both return ["na", "Batman"] let batmanLyricsUniqueLodash = _.uniq(batmanLyrics); let batmanLyricsUniqueVanilla = [...new Set(batmanLyrics)];

数组过滤:

欢迎大家来到IT世界,在知识的湖畔探索吧!let countries = [ "United States", "Belgium", "Japan", "China", "South Korea" ]; // Both return ["Japan", "China", "South Korea"] let asianCountriesLodash = _.filter( countries, country => country != "United States" && country != "Belgium" ); let asianCountriesVanilla = countries.filter( country => country != "United States" && country != "Belgium" );

数组包含：

let frenchFlagColors = ["Blue", "White", "Red"]; // Both return false let frenchFlagHasGreenLodash = _.include(frenchFlagColors, "Green"); let frenchFlagHasGreenVanilla = frenchFlagColors.include("Green");

4.本文总结

虽然 lodash 提供了一个巨大的功能库，但随着ES6/Babel的出现，其中的大部分功能已不再需要。如果确实需要引入lodash的话，希望能在成本、收益之间做一个权衡。

在 ES6 之前，lodash确实是一个神级存在，就像回到jQuery的时代一样，提供了丰富的跨浏览器功能。 而在2023年，跨浏览器功能可能已经不再需要它了！

有一个关于lodash的安全性小插曲也值得关注：开源安全平台 Snyk 的开发者 Liran Tal 在2019年发现了一个严重性的、原型污染漏洞，几乎涉及所有的Lodash版本，对用户群和服务安全性造成极大威胁。

参考资料

https://thejs.dev/jmitchell/its-time-to-let-go-of-lodash-nqc

https://nicozerpa.com/lodash-underscore-necessary-or-obsolete/