当前位置:首页 > 技术文章 > 正文内容

2023 前端是否还需要 lodash ?(前端会被淘汰吗)

zonemu3个月前 (07-10)技术文章48

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

前言

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

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

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

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

3.解决 lodash 代码爆炸问题

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

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

数组打平:

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)];

数组过滤:

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/

相关文章

微软的Linux发行版终于加入了对XFS根文件系统的支持

当许多Linux发行版在评估新的根文件系统选项或甚至像OpenZFS这样的特性,微软内部Linux发行版到本月才开始支持XFS作为根文件系统选项。随着这个月对微软内部Linux发行版CBL-Marin...

同事git push到主分支上了,技术总监怒了

事情是这样的,同事前几天提交使用git提交代码的时候不小心提交到主分支上了,关键还提交成功了,这可是他自己开发的模块,还没测试的呢。技术总监也知道了,这下他慌乱了。最后还是技术总监给他兜底了。为了防止...

WordPress 内置的数组处理相关函数大全

我们使用 WordPress 开发的时候,有很大一部分的工作和数组处理有关,WordPress 本身也内置了一些非常方便的数组处理函数,今天给大家罗列一下,也方便自己以后写代码的时候查询。wp_par...

AOP的实现落地(拦截过滤),一切都要从Servlet说起

一、一切要从Servlet说起1.1什么是ServletServlet(Server Applet),全称是Java Servlet,是提供基于协议请求/响应服务的Java类。在JavaEE中是Ser...

Vue学习笔记之动态路由的参数传递应用及技巧

路由的参数传递:①通过params的类型· 配置路由格式:/router/:id· 传递的方式:在path后面跟上对应的值· 传递后形成的路径:/router/list,/router/profile...

vue-router控制页面是否刷新(vue刷新页面如何保证路由不变)

使用需求我们在使用vue-router控制页面跳转时,特别当我们打开这个页面,在未关闭的情况下,我们又打开了另一个页面,然后当我们再次回到刚才打开的页面时,回到的这个页面是否要刷新,是我们经常需要控制...