node_modules 是该好好治一治了

news/2024/7/10 0:56:15 标签: java, python, linux, vue, npm

作为前端开发者,大家有没有被 node_modules 困扰过呢?

反正我是有。。。因为 npm 特殊的包管理机制,往往一个很小的项目就会携带一个很大的 node_modules 。相信大家都刷到过下面这张图,这就是对前端依赖最大的讽刺了。😂

b02ce6dee70e005a2a22949b46cb8b92.png

有时候,可能不经意间我们就会引入一个意外的依赖包,或者不小心升级了一个有 break chage 的依赖,还有可能在一个项目中安装了多个互相冲突的依赖版本。但是每次遇到这种问题,想要排查问题都要花费大量时间。

比如,我们想查询一个依赖在项目中的安装情况,我们可能会使用 npm ls 命令,但是这个命令实在是太慢了,而且打印出来的信息而且混乱。

或者直接去 lock 里面检查版本?你可能要花费更多的时间,而且不一定能找全。

qnm

最近在逛 Github 发现了一个宝藏 CLI 工具:qnm,它可以帮助我们快速梳理前端依赖信息,并且同时支持 npmyarn

24de64d7dd685b2a918028cf278e618f.png

我们可以把它安装到全局,或者使用 npx 调用:

npm i --global qnm

分析依赖

用法:qnm [module], 我们尝试查看下所有安装的 lodash

42f62d6bf5b0e35d531aa6380bc9c8d7.png

这意味着, lodash 在我们的项目里被安装了 15 次,我们项目直接依赖的版本是 4.17.11,发布于 3 年前(已经很落后了),其他间接依赖的都是 4.17.21 版本,发布于 1 周前。

我们来对比下实际的 node_modules 目录,发现是可以一一对应上的:

e185b45182443736079e76c36d5ff92e.png

再来对比下 npm ls lodash 的结果,相比之下这个真的很慢而且展示比较乱:

58a6d2701ca9ffa088b175fcf9695831.png

你还可以对包进行模糊搜索(直接在命令行输入 qnm):

24373c766e9f37e123e49ca46634319b.gif

另外,还有一些参数选项:

  • --no-remote:禁止从 npm 获取远程数据,可以加快命令速度;

  • -o , --open:使用默认编辑器打开模块的 package.json 文件;

  • -d, --debug:查看完整的错误消息,主要用于调试;

  • --disable-colors:禁用大部分颜色和样式,例如版本颜色。

分析空间占用

你可以使用 qnm doctor 分析 node_modules 目录中占用最多空间的内容,这个一分析还是挺让我吃惊的,有的老项目 node_modules 已经占用了几个 G 的空间了。。

cdb4ac551e70b6dcf3bc38c472598b4a.png

调用 qnm doctor --sort duplicates 查看重复依赖占用的空间:

0667bd6f230c6e9596e73036fe0aebd6.png

分析所有模块

调用 qnm list 命令分析 node_modules 目录中所有模块(等同于直接调用 npm ls ,但是要比它的速度和可读性好太多了)。

40d53a5244fb2d7eb228eff009732b1e.png

模糊匹配

qnm match 命令类似于 grep 命令,可以匹配包含某字符串的任何模块。

比如我们想查找我们装了哪些 babel 插件:

9ab0edf48ccb690ca954332c1d3712f2.png

怎么样,有了这个命令行工具是不是感觉治理 node_modules 要轻松一些了?赶紧收藏起来吧(https://github.com/ranyitz/qnm)!

点赞在看是最大的支持⬇️❤️⬇️


http://www.niftyadmin.cn/n/1250842.html

相关文章

Spring Boot之 Actuator 监控应用

Actuator 监控 Spring Boot 使用“习惯优于配置的理念”,采用包扫描和自动化配置的机制来加载依赖 Jar 中的 Spring bean,不需要任何 Xml 配置,就可以实现 Spring 的所有配置。虽然这样做能让我们的代码变得非常简洁,但是整个应用…

Vue3 究竟好在哪里?

Vue3 作为国内最火的前端框架之一,已经成为所有前端人绕不开的基本技能。但怎么学习,看到不少人都有疑问:尤雨溪本人则说,“直接学 Vue3 就完事了”。当然,若你 Vue 基础比较薄弱,也不用怕,可以…

聊一聊 Vue2 升级到 Vue3 到底是不是一个正确的选择?

作者:掘金干货君https://juejin.cn/post/7117525259212816414就在前两天,一篇反对Vue2升级到Vue3的文章在vue官方社区引起了热议。(原文链接:Vue 3 was a mistake that we should not repeat[1])这篇文章从实际应用角度…

使用 spring-boot-admin 对 Spring Boot 服务进行监控

上一篇文章介绍了 Spring Boot Actuator 的使用,Spring Boot 提供了对单个 Spring Boot 的监控,信息包含:应用状态、内存、线程、堆栈等等,比较全面的监控了 Spring Boot 应用的整个生命周期。 但是这样监控也有一些问题&#x…

Docker 是怎么实现的?前端怎么用 Docker 做部署?

代码开发完之后,要经过构建,把产物部署到服务器上跑起来,这样才能被用户访问到。不同的代码需要不同的环境,比如 JS 代码的构建需要 node 环境,Java 代码 需要 JVM 环境,一般我们会把它们隔离开来单独部署。…

Spring Boot 之项目启动时初始化资源

在我们实际工作中,总会遇到这样需求,在项目启动的时候需要做一些初始化的操作,比如初始化线程池,提前加载好加密证书等。今天就给大家介绍一个 Spring Boot 神器,专门帮助大家解决项目启动初始化资源操作。 这个神器就…

windows系统安装memcached

下载所需要的软件,我使用的版本是1.4.4的,地址:链接:https://pan.baidu.com/s/1YR-DVkB7dj2rtZzHuzkCLw 提取码:zcs8 以管理员身份打开cmd命令行,搜索cmd,找到命令提示符,右键选择…

为什么有人说 vite 快,有人却说 vite 慢?

前言谈到 Vite,给人的第一印象就是 dev server 启动速度快。同样规模的项目,相比 Webpack动辄十几秒甚至几十秒的的启动速度,Vite 简直是快到没朋友,往往数秒之内即可完成启动(PS: 都没有时间去喝一杯 ☕️ 啦)。正好小编最近在做…