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

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

zonemu2个月前 (07-10)技术文章26

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

前言

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/

相关文章

Vue3 如何实现父子组件传值?(vue父子组件传值props)

在Vue 3中,要实现父子组件传值效果主要通过props和emit两种机制来实现,下面我们就来详细介绍一下这两种机制。父组件向子组件传值propsprops是Vue组件的一种机制,主要的作用就是实现从...

gitlab简单搭建与应用(gitlab怎么用)

一、gitlab1、简介GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。与Github类似,GitLab...

Jenkins 学习笔记(jenkins要学多久)

本学习笔记参考《Jenkins 2.x实践指南》。1. Jenkins 简介#Jenkins 是一款自动化的任务执行工具。通常用于持续集成/持续交付领域。可以通过界面或Jenkinsfile告诉Jen...

02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html1.结构元素 可以理解为语义话标记,比如:以前这么写<...

html5你能把太阳系动态做出来,但是你能把月亮也做出来吗?

需要源码请评论后加前端学习群470593776课题:HTML5加原生js打造一个炫酷动态的太阳系简介:首先对于太阳系各大星球的运转关系,速度等资料,不然弄出来也是被喷的下场, 还有对于逻辑思维,算法的...

HTML5与APP的抉择(h5与app的区别)

同为当下炙手可热的技术,围绕APP和HTML5难免少不了各种争辩。而在“互联网+”时代,许多面临转型的传统企业,也在选择转型工具时,陷入了HTML5或APP的纠结抉择之中……到底该选择HTML5还是A...