当前位置: 首页 > news >正文

gzip引入后node_modules中.cache compression-webpack-plugin占用内存过多

1.Gzip

Gzip(GNU zip)是一种常见的文件压缩格式和压缩算法,通常用于在 Web 服务器上对静态资源文件进行压缩,以减小文件大小并加快文件传输速度。在前端开发中,经常会使用 Gzip 压缩来优化网站的性能。

Gzip 压缩通过移除文件中的重复数据和不必要的信息来减小文件大小,从而减少网络传输时间。当浏览器请求支持 Gzip 压缩的资源时,服务器会将这些资源进行压缩,并在响应中添加相应的头部信息表明该资源已经被压缩。浏览器在接收到响应后会解压缩这些资源,并正常加载页面。

在前端开发中,常见的静态资源如 JavaScript、CSS 和字体文件都可以通过 Gzip 压缩来减小文件大小。大多数现代的 Web 服务器都支持 Gzip 压缩,并提供了相应的配置选项来启用该功能。

如果你想在自己的项目中使用 Gzip 压缩,你需要确保你的 Web 服务器已经配置了 Gzip 压缩,并且你的静态资源文件类型被包括在了压缩范围内。一般来说,在使用类似于 Nginx 或 Apache 的 Web 服务器时,你可以通过配置文件来启用 Gzip 压缩。

总之,Gzip 压缩是一种常见且有效的前端性能优化手段,可以显著减小静态资源文件的大小,提高网页加载速度。

2.compression-webpack-plugin

用于在构建过程中对静态资源文件进行压缩的 Webpack 插件。它可以帮助你在构建过程中生成经过压缩的静态资源文件,比如 JavaScript 和 CSS 文件,以减小文件大小并提高加载速度。

该插件基于 Node.js 中的 zlib 模块,可以使用多种压缩算法(如 Gzip、Brotli 等)对文件进行压缩。通过使用 compression-webpack-plugin,你可以轻松地在 Webpack 构建过程中自动地对输出的静态资源文件进行压缩处理。

const CompressionPlugin = require('compression-webpack-plugin');module.exports = {// ...其他配置plugins: [new CompressionPlugin({algorithm: 'gzip',test: /\.(js|css)$/,threshold: 10240,minRatio: 0.8})]
};

引入了 compression-webpack-plugin,并将其作为一个插件添加到了 Webpack 的配置中。在插件的参数中,我们指定了要使用的压缩算法为 Gzip(也可以是其他算法),并且指定了要压缩的文件类型、阈值等参数。

并且此插件默认开启cache缓存。每一次running的时候cache缓存会对应增加,一个月差不多100g

3.问题解决

 3.1暂时解决

        ·直接删除对应的缓存

3.2vue.config中设置 

插件默认开启cache缓存,设置.cache:false

vueConfig.configureWebpack.plugins.push(new CompressionWebpackPlugin({// 开发模式的时候不开启,生产模式的时候开启。此插件默认开启cache缓存cache: false,filename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240, // 只有大小大于该值的资源会被处理 10240minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理deleteOriginalAssets: false // 删除原文件}))module.exports = vueConfig

根据需要进行.cache的配置,可以将其配置成环境变量,不同环境下进行判断是否缓存。

相关文章:

gzip引入后node_modules中.cache compression-webpack-plugin占用内存过多

1.Gzip Gzip(GNU zip)是一种常见的文件压缩格式和压缩算法,通常用于在 Web 服务器上对静态资源文件进行压缩,以减小文件大小并加快文件传输速度。在前端开发中,经常会使用 Gzip 压缩来优化网站的性能。 Gzip 压缩通过…...

Vue:使用IDEA开发Vue的相关配置

一、IDEA无法识别.vue文件 1、IDEA 添加Vue插件 2、添加Vue配置 File | Settings | Editor | File Types 找到 HTML 文件 在下面点号 输入*.vue 二、IDEA无法创建.vue文件 1、问题 在开发过程中,发现创建文件的界面,没有vue模板 2、相关配置 Fi…...

黑马程序员SSM框架-SpringBoot

视频连接:SpringBoot-01-SpringBoot工程入门案例开发步骤_哔哩哔哩_bilibili SpringBoot简介 入门程序 也可以基于官网创建项目。 SpringBoot项目快速启动 下面的插件将项目运行所需的依赖jar包全部加入到了最终运行的jar包中,并将入口程序指定。 Spri…...

Javascript细节、经验锦集

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/135311084 出自【进步*于辰的博客】 纯文字阐述,内容比较干。并且,由于考…...

git的使用基础教程

最近项目在搞自动化测试,需要将各种测试脚本集成到自动化框架里边,这个就需要用到版本管理系统了,下面简单价绍一下git的使用。 首先从官网下载并安装git工具,下面以wins系统为例子说明 https://git-scm.com/downloads wins安装好后&#xff…...

Springboot整合Elasticsearch 7.X 复杂查询

这里使用Springboot 2.7.12版本&#xff0c;Elasticsearch为7.15.0。 导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId></dependency> yaml文件配置…...

第5课 使用openCV捕获摄像头并实现预览功能

这节课我们开始利用ffmpeg和opencv来实现一个rtmp推流端。推流端的最基本功能其实就两个:预览画面并将画面和声音合并后推送到rtmp服务器。 一、FFmpeg API 推流的一般过程 1.引入ffmpeg库&#xff1a;在代码中引入ffmpeg库&#xff0c;以便使用其提供的功能。 2.捕获摄像头…...

Python3操作Json文件碰到的几个问题

文章目录 小结问题及解决byte数组与str字符串之间不兼容没有Index属性JSON.DUMP(S) & JSON.LOAD(S) 参考 小结 使用Python3操作Json文件碰到的几个问题&#xff0c;进行了解决。 问题及解决 byte数组与str字符串之间不兼容 以下的几个问题都是由于字节数组和字符串之间…...

Java中的自定义异常处理:业务异常类的创建与使用

文章内容 引言 在Java编程中&#xff0c;异常处理是一项重要的技术&#xff0c;它允许程序在遇到错误或特殊情况时能够优雅地处理&#xff0c;而不是直接崩溃。Java提供了丰富的内置异常类&#xff0c;但在实际业务开发中&#xff0c;我们往往需要根据具体的业务需求定义自己的…...

微信小程序有几个文件

微信小程序通常由多个文件组成&#xff0c;主要包括以下几种类型的文件&#xff1a; JSON 配置文件&#xff1a; app.json: 整个小程序的全局配置&#xff0c;包括页面路径、窗口样式、网络超时时间等。 page.json: 单个页面的配置&#xff0c;用于指定该页面的窗口样式、导航…...

计算机网络:知识回顾

0 本节主要内容 问题描述 解决思路 1 问题描述 通过一个应用场景来回顾计算机网络涉及到的协议&#xff08;所有层&#xff09;。如下图所示场景&#xff1a; 学生Bob将笔记本电脑用一根以太网电缆连接到学校的以太网交换机&#xff1b;交换机又与学校的路由器相连&#xf…...

【Python百宝箱】音韵探奇:探索Python中的音频与信号魔法

数字音符&#xff1a;畅游Python音频与信号处理的科技奇境 前言 在数字时代&#xff0c;音频与信号处理不仅仅是专业领域的关键&#xff0c;也成为了科技创新和艺术创作的核心。本文将带领您深入探索Python中多个强大的音频处理库和信号处理工具&#xff0c;从Librosa到Tenso…...

springboot(ssm农产品直卖平台 农产品商城系统Java系统

springboot(ssm农产品直卖平台 农产品商城系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; 数…...

C#编程-使用条件构造

使用条件构造 作判定是人的基本能力。判定也是可收编进程序。这有助于确定程序执行指令的顺序。 您可用条件构造来控制程序的流程。条件构造允许您基于被求职的表达式的结果来执行选定语句。 可以包含在C#程序中的各种条件构造是: if…else 构造switch…case 构造if…else构…...

【BERT】深入理解BERT模型1——模型整体架构介绍

前言 BERT出自论文&#xff1a;《BERT&#xff1a;Pre-training of Deep Bidirectional Transformers for Language Understanding》 2019年 近年来&#xff0c;在自然语言处理领域&#xff0c;BERT模型受到了极为广泛的关注&#xff0c;很多模型中都用到了BERT-base或者是BE…...

【Java开发岗面试】八股文—设计模式

声明&#xff1a; 背景&#xff1a;本人为24届双非硕校招生&#xff0c;已经完整经历了一次秋招&#xff0c;拿到了三个offer。本专题旨在分享自己的一些Java开发岗面试经验&#xff08;主要是校招&#xff09;&#xff0c;包括我自己总结的八股文、算法、项目介绍、HR面和面试…...

GO基础进阶篇 (九)、临界资源安全问题(锁、channel)

临界资源安全问题 在并发编程中对临界资源的处理不当&#xff0c;往往会导致数据的不一致问题 package mainimport ("fmt""time" )func main() {a : 1go func() {a 2fmt.Println("goroutine", a)}()a 3fmt.Println("a", a)time.Sl…...

Python基础-04(比较运算符、逻辑运算符)

文章目录 前言一、比较运算符二、逻辑运算符1.and&#xff08;与&#xff09;2.or&#xff08;或&#xff09;3.not&#xff08;非&#xff09;4.逻辑运算符的细节&#xff08;短路原则&#xff09;&#xff08;着重理解&#xff09; 总结 前言 1、比较运算符内容很简单&#…...

MySQL 四种插入命令及其特点与锁机制

目录 1. INSERT INTO 2. INSERT IGNORE INTO 3. INSERT INTO ... ON DUPLICATE KEY UPDATE 4. REPLACE INTO 总结 MySQL提供了多种数据插入方式&#xff0c;每种方式在处理唯一键冲突时的行为不同&#xff0c;同时也涉及不同的锁机制。 1. INSERT INTO INSERT INTO是标准…...

AKShare学习笔记

AKShare学习笔记 本文内容参考AKShare文档。AKShare开源财经数据接口库采集的数据都来自公开的数据源&#xff0c;数据接口查询出来的数据具有滞后性。接口参考AKShare数据字典。 AKShare环境配置 安装Anaconda&#xff0c;使用Anaconda3-2019.07版本包&#xff0c;配置清华数…...

Live Server 5分钟完全指南:如何在VSCode中实现浏览器实时预览?

Live Server 5分钟完全指南&#xff1a;如何在VSCode中实现浏览器实时预览&#xff1f; 【免费下载链接】vscode-live-server Launch a development local Server with live reload feature for static & dynamic pages. 项目地址: https://gitcode.com/gh_mirrors/vs/vs…...

【ElevenLabs语音伦理合规白皮书】:面向银发群体的AI语音生成必须绕开的4类GDPR/《互联网信息服务深度合成管理规定》雷区

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;银发群体AI语音服务的伦理合规必要性 随着智能语音助手在居家养老、远程问诊、紧急呼叫等场景中的深度部署&#xff0c;面向60岁以上用户的AI语音服务已从“可选功能”演变为“关键基础设施”。然而&am…...

初探Taotoken平台提供的APIKey管理与访问控制功能

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 初探Taotoken平台提供的APIKey管理与访问控制功能 效果展示类&#xff0c;作者以新用户视角&#xff0c;探索并描述在Taotoken控制…...

ColorBrewer终极指南:快速掌握专业地图配色方案

ColorBrewer终极指南&#xff1a;快速掌握专业地图配色方案 【免费下载链接】colorbrewer 项目地址: https://gitcode.com/gh_mirrors/co/colorbrewer ColorBrewer是一个基于Cynthia Brewer博士研究成果的专业颜色方案工具&#xff0c;专门为地图制图和数据可视化提供科…...

SAP屏幕导航:从SET到LEAVE,实战解析六大跳转策略

1. SAP屏幕导航的核心逻辑 在SAP ABAP开发中&#xff0c;屏幕导航就像是在迷宫中寻找出口。想象你手里有六把不同的钥匙&#xff08;六种跳转策略&#xff09;&#xff0c;每把钥匙对应不同的门锁&#xff08;业务场景&#xff09;。选错钥匙要么打不开门&#xff0c;要么可能把…...

ColorBrewer完整指南:如何为地图和数据可视化选择完美配色方案

ColorBrewer完整指南&#xff1a;如何为地图和数据可视化选择完美配色方案 【免费下载链接】colorbrewer 项目地址: https://gitcode.com/gh_mirrors/co/colorbrewer ColorBrewer是一个专为地图着色和数据可视化设计的开源配色工具&#xff0c;基于Cynthia Brewer博士的…...

如何用LinkSwift解锁九大网盘下载新姿势?完整攻略揭秘

如何用LinkSwift解锁九大网盘下载新姿势&#xff1f;完整攻略揭秘 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼…...

Zephyr 启动流程:从复位向量到main()的完整旅程

1. 从复位向量开始的奇妙旅程 当你按下嵌入式设备的电源按钮时&#xff0c;芯片内部就开始了一场精心编排的启动芭蕾。对于使用Zephyr RTOS的系统来说&#xff0c;这个旅程从复位向量&#xff08;Reset Vector&#xff09;开始&#xff0c;就像火车从始发站出发一样。Cortex-M架…...

刚刚!西安推拉雨棚厂家测评出炉,陕西中顺雨篷质量优但价格略

本次测评聚焦西安推拉雨棚厂家&#xff0c;旨在为对西安推拉雨棚感兴趣的人群提供客观、真实的数据和信息&#xff0c;帮助大家了解不同厂家的特点。参与本次测评的厂家为陕西中顺雨篷商贸有限公司以及其他西安推拉雨棚厂家。本次测评均基于真实数据与体验&#xff0c;无商业倾…...

实在Agent如何破解成本分析报告编制耗时耗力与数据滞后?企业架构师的避坑指南

摘要&#xff1a;在2026年的今天&#xff0c;尽管AI技术已深度普及&#xff0c;但许多企业的财务与运营部门仍深陷“数据泥潭”。传统的成本分析报告编制依赖于大量的人工导数、Excel汇总及跨系统搬运&#xff0c;导致报告产出即滞后&#xff0c;严重误导决策。作为一名深耕行业…...