解决 vue 项目开发越久 node_modules包越大的问题

解决 vue 项目开发越久 node_modules包越大的问题

node_modules.cache 文件(编译缓存文件 可以删除 )

在这里插入图片描述

compression-webpack-plugin 禁止缓存
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
    plugins: [
      new CompressionPlugin({
        cache: false, // 取消缓存
        algorithm: "gzip",
        filename: "[path].gz[query]",
        test: /\.(js|css|woff|woff2|json|txt|html|ico|svg)(\?.*)?$/i, // 要压缩的文件
        threshold: 10240, // 压缩超过10k的数据
        deleteOriginalAssets: false, // 不删除压缩前的文件,如果浏览器不支持Gzip,则会加载源文件
        minRatio: 0.8, // 压缩比大于0.8的文件将不会被压缩
      }),
    ],
}

命令可以清空本地项目的node_modules.cache ,通过命令行的方式快速清空这些缓存。

 "scripts": {
"clean-cache": "rmdir /s /q .\\node_modules\\.cache"
}

请注意,执行此命令将永久删除 .cache 文件夹及其内容,因此请谨慎使用

.cache文件几乎不占用内存了,node_modules依赖包由1.6G减少到了450M,大大减少了电脑内存占用。
项目也可以正常运行

node_modules.bin 文件夹(编译要用 不能删)

在这里插入图片描述

打开我们的 node 前端项目,npm install 后都会发现会自动生成一个 node_modules 文件夹,这里面就是我们项目安装的依赖。然后在点开 node_modules 目录,会发现第一个文件夹就是 .bin。

bin 是二进制 binary 的缩写,里面一般存放的是可执行的二进制文件。bin 在linux系统分区中表示存放标准系统实用程序的目录,sbin 存放标准系统管理文件。

项目中 node_modues/.bin 文件夹下,有两个同名的可执行文件,没有后缀名的是对应 unix 系统的 shell 脚本,.cmd 后缀的对应 windows 的 bat 脚本,实质都是用 node 执行一个 js 文件。

bin 文件夹是怎么生成的
当我们 npm run 运行一条命令时,会自动将当前项目的 node_modules/.bin 加入系统 PATH 环境变量中,等执行结束后再将 PATH 变量恢复原样。所以项目中 node_modules/.bin 目录里面的所有脚本,我们都是可以直接用脚本名来调用,而不必像我们正常执行一个 js 文件要 node 在加上执行文件的路径。

npm 项目的配置文件 package.json 中有一个 bin 的字段,当我们使用 npm 或者 yarn 命令安装一个依赖包时,如果该包的 package.json 配置文件中有 bin 字段,就会自动在我们项目中的 node_modules/.bin 目录生成指向依赖包 bin 字段的软连接(symlink)执行文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/336253.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

面向对象之深度优先和广度优先

面向对象深度优先和广度优先是什么? 二叉树的两种遍历是数据结构的经典考察题目, 广度遍历考察队列结构, 深度遍历考察递归 深度优先 先序遍历(父, 左子, 右子) 0, 1, 3, 7, 8, 4, 9, 2, 5, 6 中序遍历(左子, 父, 右子) 7, 3, 8, 1, 9, 4, 0, 5, 2, 6 后序遍历(左子…

SpringBoot跨域问题解决

前端访问后台接口时,浏览器报错,跨域无法访问。 报错信息如下: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header is present on the requested resource. 经过一番百度之后&#…

【JVM】运行时数据区

文章目录 运行时数据区程序计数器栈栈帧 堆方法区本地方法栈直接内存变量存储位置 面试题本地方法栈有什么用?没有程序计数器会怎么样?说一说Java的内存分布情况类存放在哪里?局部变量存放在哪里? 运行时数据区 java虚拟机在运行…

acwing讲解篇之93. 递归实现组合型枚举

文章目录 题目描述题解思路题解代码 题目描述 题解思路 本题相当于二叉树的深度优先遍历,树的第i层表示第i个数选或不选,当选择了m次左节点后退出 我们记录当前递归的深度deep 然后用state进行状态压缩,state第i位是1表示选第i个数&#xff…

FaFu--练习复盘--2

3、函数练习 3.1、函数表达式(1) 描述 根据以下公式计算数学表达式的值,并将结果作为函数值返回。在main()函数中输入x,调用函数fun(x),并输出fun(x)的值。 输入 输入1行,包含1个double类型的浮点数&…

git22端口超时

笔记本换了个主板后,将内容用git上传到GitHub时发现22端口超时。 以为是网络啥的原因,但是用ssh -T gitgithub.com进行多次测试,发现不是网络问题。按照网上操作,在.ssh文件夹内将config文件进行修改,改成:…

python爬取图片(thumbURL和html文件标签分别爬取)

当查看源代码,发现网址在thumbURL之后时,用此代码: # 当查看源代码,发现网址在thumbURL之后时,用此代码:import requestsheaders {User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121…

cs231n assignment1——SVM

整体思路 加载CIFAR-10数据集并展示部分数据数据图像归一化,减去均值(也可以再除以方差)svm_loss_naive和svm_loss_vectorized计算hinge损失,用拉格朗日法列hinge损失函数利用随机梯度下降法优化SVM在训练集和验证集计算准确率&a…

vue项目执行依赖安装(npm i或npm install )报ls-remote -h -t异常

从git拉取的vue项目执行依赖安装时一直报错, 报错如下图:首先,查看了node版本、npm配置的镜像地址均没找到解决办法。 在命令行中直接输入git发现提示于是从网上搜到了一个博文https://blog.csdn.net/weixin_49159364/article/details/118198…

【LeetCode】141. 环形链表

leetcode题目链接 141. 环形链表 #include <stdio.h> #include <stdbool.h>struct ListNode {int val;struct ListNode* next; }; typedef struct ListNode ListNode;bool hasCycle(ListNode* head) {ListNode* slow head, * fast head;while (fast &&…

2023年上半年网络工程师真题(1/3)

1.固态硬盘的存储介质是&#xff08;B&#xff09;。 A.光盘 B.闪存 C.软盘 D.磁盘 SSD存储介质是FLASH(一块块的存储芯片)&#xff0c;HDD(机械硬盘)存储介质是磁盘(机械臂和盘道)&#xff0c;补充:U盘的存储介质也是FLASH闪存。 2.虚拟存储技术把&#xff08;A&#xf…

最长公共前缀(Leetcode14)

例题&#xff1a; 分析&#xff1a; 我们可以先定义两个变量 i &#xff0c; j&#xff0c; j表示数组中的每一个字符串&#xff0c; i 表示每个字符串中的第几个字符。一列一列地进行比较&#xff0c;先比较第一列的字符&#xff0c;若都相同&#xff0c;则 i &#xff0c;继…

可视化 | 【echarts】渐变条形+折线复合图

文章目录 &#x1f4da;html css&#x1f4da;js&#x1f407;总体框架&#x1f407;option配置项 &#x1f4da;html css html&#xff1a;在这主要是用于整合&#xff0c;将html、css、js连接在一块&#xff0c;虽然单个模板代码量不大&#xff0c;但还是先分开&#xff0…

AI语音合成工具-Lalamu Studio

近期&#xff0c;Lalamu Studio开启了beta版本测试&#xff1a;Lalamu Studio。该工具整合了TTS和lip sync功能&#xff0c;可以让任意视频中的人物开口说话&#xff0c;并精确模拟口型。 例如&#xff0c;选择一段视频素材&#xff0c;添加由Ai合成的语音&#xff0c;即可完成…

MyBatis 系列:MyBatis 源码环境搭建

文章目录 一、环境准备二、下载 MyBatis 源码和 MyBatis-Parent 源码三、创建空项目、导入项目四、编译 mybatis-parent五、编译 mybatis六、测试总结 一、环境准备 jdk&#xff1a;17 maven&#xff1a;3.9.5 二、下载 MyBatis 源码和 MyBatis-Parent 源码 Mybatis&#x…

求职中遇到的性格测试

怎样才能不被刷? 最主要的就是自己的性格特征跟当前应聘的岗位是否相符合&#xff0c;这个符合程度越高&#xff0c;通过率自然也就越高。正规的做法都有一个岗位模型&#xff0c;也叫岗位胜任力模型。 以大五人格测试为例&#xff0c;完整版包含30个性格维度&#xff0c;从…

Pyro —— 简介

目录 Differences between legacy and sparse pyro Getting started with pyro using shelf tools Related pyro nodes Sourcing DOP simulation SOP simulation Post-Processing Rendering Simple FX shelf tools Pyro为Houdini的体积流体&#xff08;volumetric flu…

一篇文章搞懂什么是测试,测试是干什么的?

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

【STM32CubeMX串口通信详解】USART2 -- DMA发送 + DMA空闲中断 接收不定长数据

&#xff08; 本篇正在编写、更新状态中.....) 文章目录&#xff1a; 前言 前言 本篇&#xff0c;详细地用截图解释 CubeMX 对 USART2 的配置&#xff0c;HAL函数使用&#xff0c;和收发程序的编写。 收、发机制&#xff1a;DMA发送 DAM空闲中断接收。 DMA空…

Kafka-消费者-KafkaConsumer分析-Rebalance

在开始介绍Rebalance操作的实现细节之前&#xff0c;我们需要明确在哪几种情况下会触发Rebalance操作&#xff1a; 有新的消费者加入Consumer Group。有消费者宕机下线。消费者并不一定需要真正下线&#xff0c;例如遇到长时间的GC、网络延迟导致消费者长时间未向GroupCoordin…