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

nuxt2 打包优化使用“compression-webpack-plugin”插件

news 来源：原创 2025/8/23 15:24:40

在使用 Nuxt.js 构建项目时，为了提高性能，通常会考虑对静态资源进行压缩。compression-webpack-plugin 是一个常用的 Webpack 插件，用于在生产环境中对文件进行 Gzip 压缩。这对于减少网络传输时间和提高页面加载速度非常有帮助。下面是如何在 Nuxt.js 项目中配置 compression-webpack-plugin 的步骤：

1. 安装 `compression-webpack-plugin`

首先，你需要安装 compression-webpack-plugin。在你的项目根目录下打开终端，运行以下命令：

npm install --save-dev compression-webpack-plugin@4.0.1

2. 配置 `compression-webpack-plugin`

接下来，你需要在 Nuxt.js 的配置文件uxt.config.js中配置 compression-webpack-plugin，添加或修改 build 配置部分：

//nuxt.config.jsconst CompressionWebpackPlugin = require('compression-webpack-plugin')module.exports = {build: {extend(config, { isDev, isClient }) {if (!isDev && isClient) {config.plugins.push(new CompressionWebpackPlugin({filename: '[path].gz', algorithm: 'gzip',test: /\.(js|css|html|svg)$/,  // 匹配文件名threshold: 10240, // 对超过10kb的数据进行压缩minRatio: 0.8,deleteOriginalAssets: false, // 是否删除原文件}))}},}
}

3.部署上线实际效果

nuxt2 打包优化使用“compression-webpack-plugin”插件

在使用 Nuxt.js 构建项目时，为了提高性能，通常会考虑对静态资源进行压缩。compression-webpack-plugin 是一个常用的 Webpack 插件，用于在生产环境中对文件进行 Gzip 压缩。这对于减少网络传输时间和提高页面加载速度非常有帮助。下面是如何在…...

编程日记 2025/8/23 15:24:40

RabbitMQ知识点

1.为什么需要消息队列？ RabbitMQ体系结构操作001：RabbitMQ安装二、安装 # 拉取镜像 docker pull rabbitmq:3.13-management # -d 参数：后台运行 Docker 容器 # --name 参数：设置容器名称 # -p 参数：映射端口号&…...

编程日记 2025/8/23 13:48:46

Windsuf 连接失败问题：[unavailable] unavailable: dial tcp...

问题描述 3月6日，在使用Windsuf 时，遇到以下网络连接错误： [unavailable] unavailable: dial tcp 35.223.238.178:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of…...

编程日记 2025/8/23 15:22:33

Spark 3.0核心新特性解析与行业应用展望

Spark 3.0核心新特性解析与行业应用展望一、自适应查询执行（Adaptive Query Execution, AQE）作为Spark 3.0最具突破性的优化，AQE通过运行时动态调整执行计划，解决了传统静态优化的局限性。其核心技术突破体现在三方面： 1. 动态分区合并（Dynamically Coalescing Shuf…...

编程日记 2025/8/23 15:17:54

基于 harbor 构建docker私有仓库

仓库（Repository）是集中存放镜像的地方，又分公共仓库和私有仓库。有时候容易把仓库与注册服务器（Registry）混淆。实际上注册服务器是存放仓库的具体服务器， 一个注册服务器上可以有多个仓库，…...

编程日记 2025/8/22 23:58:50

MySQL基本建表操作

目录 1，创建数据库db_ck 1.1创建表 1.2 查看创建好的表 2,创建表t_hero 2.1 先进入数据库Db_Ck 2.1.1 这里可以看是否进入数据库: 2.2 创建表t_Hero 2.2.1 我们可以先在文本文档里面写好然后粘贴进去，因为直接写的话，错了要重新开始 …...

编程日记 2025/8/23 2:14:27

低空经济快速发展，无人机人才培养及校企实验室共建技术详解

随着低空经济的快速发展，无人机作为该领域的关键技术载体，其应用范围和市场需求正在迅速扩大。为了满足这一趋势，无人机人才的培养以及校企实验室的共建成为了推动技术进步和产业升级的重要途径。以下是对无人机人才培养及校企实验室共建技术…...

编程日记 2025/8/23 15:16:26

电脑网络出现问题！简单的几种方法解除电脑飞行模式

在某些情况下，您可能需要关闭电脑上的飞行模式以便重新连接到 Wi-Fi、蓝牙或其他无线网络。本教程中简鹿办公将指导您如何在 Windows 和 macO S操作系统上解除飞行模式。一、Windows 系统下解除飞行模式通过快捷操作中心步骤一：点击屏幕右下角的通知…...

编程日记 2025/8/23 15:12:01

Docker入门篇1：搜索镜像、拉取镜像、查看本地镜像列表、删除本地镜像

大家好我是木木，在当今快速发展的云计算与云原生时代，容器化技术蓬勃兴起，Docker 作为实现容器化的主流工具之一，为开发者和运维人员带来了极大的便捷。下面我们一起开始入门第一篇：搜索镜像、拉取镜像、查看本地镜像…...

编程日记 2025/8/23 15:19:18

网络初级复习作业

作业要求： 1,学校内部的HTTP客户端可以正常通过域名www.baidu.com访问到白度网络中的HTTP服务器 2，学校网络内部网段基于192.168.1.0/24划分：PC1可以正常访问3.3.3.0/24网段，但是PC2不允许 3,学校内部路由使用静态路由&#xf…...

编程日记 2025/8/23 4:04:18

Spring Boot 调用DeepSeek API的详细教程

目录前置准备步骤1：创建Spring Boot项目步骤2：配置API参数步骤3：创建请求/响应DTO步骤4：实现API客户端步骤5：创建控制器步骤6：异常处理步骤7：测试验证单元测试示例Postman测试请求常见问题排查…...

编程日记 2025/8/23 15:20:09

rpc和proto

rpc全称远程过程控制，说白了是一种对信息发送和接收的规则编写方法，来自google，这些规则会以protobuf代码存到proto文件里。我以autoGen中agent_worker.proto为例，大概长这样 syntax "proto3";package agents;option …...

编程日记 2025/8/23 15:17:04

我的两个医学数据分析技术思路

我的两个医学数据分析技术思路从临床上获得的或者公共数据库数据这种属于观察性研究，是对临床诊疗过程中自然产生的数据进行分析而获得疾病发生发展的规律等研究成果。再细分，可以分为独立危险因素鉴定和预测模型构建两种。独立危险因素鉴定是一直以…...

编程日记 2025/8/23 15:14:45

GitHub上传项目

总结（有基础的话直接执行这几步，就不需要再往下看了）： git init 修改git的config文件：添加:[user]:name你的github用户名 email你注册github的用户名 git branch -m master main git remote add origin 你的URL gi…...

编程日记 2025/8/23 15:23:25

汇编点亮LED

目录一、ARM常用汇编指令二、汇编点亮LED 2.1 GPIO简述 2.2 GPIO相关寄存器 2.3 LED原理图 2.4 汇编点亮LED 一、ARM常用汇编指令常用汇编格式： label : instruction @ comment label：标号 instruction：具体汇编指令 comment：注释内容常…...

编程日记 2025/8/23 15:17:05

VS Code C++ 开发环境配置

VS Code 是当前非常流行的开发工具. 本文讲述如何配置 VS Code 作为 C开发环境. 本文将按照如下步骤来介绍如何配置 VS Code 作为 C开发环境. 安装编译器安装插件配置工作区第一个步骤的具体操作会因为系统不同或者方案不同而有不同的选择. 环境要求首先需要立即 VS Code…...

编程日记 2025/8/23 15:20:10

Python深度学习算法介绍

一、引言深度学习是机器学习的一个重要分支，它通过构建多层神经网络结构，自动从数据中学习特征表示，从而实现对复杂模式的识别和预测。Python作为一门强大的编程语言，凭借其简洁易读的语法和丰富的库支持，成为深度学…...

编程日记 2025/8/23 15:23:58

hadoop集群HDFS读写性能测试

一、写测试命令 hadoop jar $HADOOP_HOME/share/hadoop/mapreduce/hadoop-mapreduce-client-jobclient-3.1.4-tests.jar TestDFSIO -write -nrFiles 10 -size 10MB二、读测试命令 hadoop jar $HADOOP_HOME/share/hadoop/mapreduce/hadoop-mapreduce-client-jobclient-3.1.4-t…...

编程日记 2025/8/23 15:17:04

HTTPS加密原理详解

目录 HTTPS是什么加密是什么 HTTPS的工作流程 1.使用对称加密 2.引入非对称加密 3.引入证书机制客户端验证证书真伪的过程签名的加密流程整体工作流程总结 HTTPS是什么 HTTPS协议也是一个应用程协议，是在HTTP的基础上加入了一个加密层，由…...

编程日记 2025/8/23 15:20:12

react基本功

useLayoutEffect useLayoutEffect 用于在浏览器重新绘制屏幕之前同步执行代码。它与 useEffect 相同，但执行时机不同。主要特点执行时机：useLayoutEffect 在 DOM 更新完成后同步执行，但在浏览器绘制之前。这使得它可以在浏览器渲染之前读取和修改 DOM，避免视觉上的闪烁…...

编程日记 2025/8/16 10:11:38

计算机视觉｜3D 点云处理黑科技：PointNet++ 原理剖析与实战指南

一、引言在当今数字化与智能化快速发展的时代，3D 点云处理技术在多个前沿领域中发挥着重要作用。特别是在自动驾驶和机器人视觉等领域，这项技术已成为实现智能化的关键支撑。以自动驾驶为例，车辆需要实时感知周围复杂的环境信息&#xff…...

编程日记 2025/8/22 2:38:18

【VUE2】第三期——样式冲突、组件通信、异步更新、自定义指令、插槽

目录 1 scoped解决样式冲突 2 data写法 3 组件通信 3.1 父子关系 3.1.1 父向子传值 props 3.1.2 子向父传值 $emit 3.2 非父子关系 3.2.1 event bus 事件总线 3.2.2 跨层级共享数据 provide&inject 4 props 4.1 介绍 4.2 props校验完整写法 5 v-model原理 …...

编程日记 2025/8/23 7:11:58

WebAssembly技术及应用了解

WebAssembly（Wasm）是一种为Web设计的高效、低级的二进制指令格式，旨在提升Web应用的性能并支持多种编程语言。以下是对其核心概念、优势、应用场景及开发流程的系统介绍： 1. 核心概念二进制格式：Wasm采用紧凑的二进制…...

编程日记 2025/8/21 17:52:40

工程化与框架系列（26）--前端可视化开发

前端可视化开发 📊 引言前端可视化是现代Web应用中不可或缺的一部分，它能够以直观的方式展示复杂的数据和信息。本文将深入探讨前端可视化开发的关键技术和最佳实践，包括图表绘制、数据处理、动画效果等方面。可视化技术概述前端可视化…...

编程日记 2025/8/23 1:40:21

ESP32的IDF开发学习-WiFi的开启、配置与连接

前言本章节将实现如何使用ESP32的WiFi功能，尽可能的详细地介绍简介 ESP32中的wifi支持双工作模式 Station（STA）模式：连接到路由器或其他AP设备，可通过esp_wifi_set_mode(WIFI_MODE_STA)设置。SoftAP模式&#xf…...

编程日记 2025/8/21 13:13:53

2025-3-9 一周总结

目前来看本学期上半程汇编语言,编译原理,数字电路和离散数学是相对重点的课程. 在汇编语言和编译原理这块,个人感觉黑书内知识点更多,细节更到位,体系更完整,可以在老师讲解之前进行预习应当及时复习每天的内容.第一是看书,然后听课,在一天结束后保证自己的知识梳理完整,没有…...

编程日记 2025/8/23 15:14:52

【网络编程】事件选择模型

十、基于I/O模型的网络开发 10.9 事件选择模型 10.0.1 基本概念事件选择(WSAEventSelect) 模型是另一个有用的异步 I/O 模型。和 WSAAsyncSelect 模型类似的是，它也允许应用程序在一个或多个套接字上接收以事件为基础的网络事件通知，最主要的差别在…...

编程日记 2025/8/19 19:58:58

Java核心语法：从变量到控制流

一、变量与数据类型（对比Python/C特性） 1. 变量声明三要素 // Java（强类型语言，需显式声明类型） int age 25; String name "CSDN"; // Python（动态类型） age 25 name …...

编程日记 2025/8/21 21:32:53

信息安全与网络安全的区别_信息安全与网络安全之差异探析

在当今数字化时代，信息安全与网络安全成为了人们关注的热点话题。尽管这两个概念经常被提及，但它们之间存在着明显的区别。本文旨在探讨信息安全与网络安全的定义、范畴及应对策略，以帮助读者更好地理解和应对相关挑战。一、定义与范畴的差…...

编程日记 2025/8/22 23:19:46

http协议的三次握手机制

HTTP协议是基于TCP协议的，因此HTTP的三次握手机制实际上就是TCP的三次握手机制。TCP（传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。为了确保通信的可靠性，TCP在建立连接时需要进行三次握手。下面我们详细…...

编程日记 2025/8/18 11:42:01

探秘沃尔什-哈达玛变换（WHT）原理

沃尔什-哈达玛变换（WHT）起源起源与命名（20世纪早期） 数学基础：该变换的理论基础由法国数学家雅克哈达玛（Jacques Hadamard）在1893年提出，其核心是哈达玛矩阵的构造。扩展与命名&…...

编程日记 2025/8/19 14:22:56

C++ Windows下屏幕截图

屏幕截图核心代码（如果要求高帧率，请使用DxGI）： // RGB到YUV的转换公式 #define RGB_TO_Y(r, g, b) ((int)((0.299 * (r)) (0.587 * (g)) (0.114 * (b)))) #define RGB_TO_U(r, g, b) ((int)((-0.169 * (r)) - (0.331 * (g)) …...

编程日记 2025/8/22 2:00:20

【python爬虫】酷狗音乐爬取练习

注意：本次爬取的音乐仅有1分钟试听，仅作学习爬虫的原理，完整音乐需要自行下载客户端。一、初步分析登陆酷狗音乐后随机选取一首歌，在请求里发现一段mp3文件，复制网址，确实是我们需要的url。复制音频的…...

编程日记 2025/8/19 11:53:45

电路的一些设计经验

这个C37在这里位于AMS1117-3.3稳压器的输入端。这个是作为输入滤波电容，有助于平滑输入电压，减少输入电压的纹波和噪声，从而提高稳压器LDO的稳定性。电容器储存电荷，当输入电压出现小的拨动或者纹波时，电容器可以释放…...

编程日记 2025/8/23 1:11:29

Windows编译环境搭建(MSYS2\MinGW\cmake)

我的音视频/流媒体开源项目(github) 一、基础环境搭建 1.1 MSYS2\MinGW 参考：1. 基于MSYS2的Mingw-w64 GCC搭建Windows下C开发环境_msys2使用mingw64编译在Widndows系统上，使用gcc工具链（g）进行C程序开发？可以的&a…...

编程日记 2025/8/22 7:01:04

Vue 框架深度解析：源码分析与实现原理详解

文章目录一、Vue 核心架构设计1.1 整体架构流程图1.2 模块职责划分二、响应式系统源码解析2.1 核心类关系图2.2 核心源码分析2.2.1 数据劫持实现2.2.2 依赖收集过程三、虚拟DOM与Diff算法实现3.1 Diff算法流程图3.2 核心Diff源码四、模板编译全流程剖析4.1 编译流程图4.2 编…...

编程日记 2025/8/23 0:43:56

前端 | CORS 跨域问题解决

问题：Access to fetch at http://localhost:3000/save from origin http://localhost:5174 has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header is present on the request…...

编程日记 2025/8/16 12:03:29

《白帽子讲 Web 安全》之文件操作安全

目录引言 （一）文件上传与下载漏洞概述 1.文件上传的常见安全隐患 1.1前端校验的脆弱性与服务端脚本执行危机在文件上传流程中，部分开发者可能会在前端使用 JavaScript 代码对文件后缀名进行简单校验，试图以此阻止非法文件上传…...

编程日记 2025/8/21 14:50:18

【AI】AI开源IDE：CLine源码分析报告

1. 源码位置： CLine 是一个开源的 VSCode 插件，其完整源码托管在 GitHub 的 cline/cline 仓库中。这个仓库包含 CLine 的核心逻辑（TypeScript 编写），包括与 LLM 的对话控制、工具调用接口，以及 VSCode 插件…...

编程日记 2025/8/19 14:09:29

使用数据库和缓存的时候，是如何解决数据不一致的问题的？

1.缓存更新策略 1.1. 缓存旁路模式（Cache Aside） 在应用里负责管理缓存，读取时先查缓存，如果命中了则返回缓存，如果未命中就查询数据库，然后返回缓存，返回缓存的同时把数据给写入缓存中。更新…...

编程日记 2025/8/18 15:03:10

docker compose 以redis为例

常见docker compose 命令》》注意这个是旧版本的，新版本 docker 与compose 之间没有 - 新版本的 docker compose 把 version 取消了 ，redis 默认是没有配置文件的 ，nginx，mysql 默认是有的 services:redis:image: redis:lat…...

编程日记 2025/8/19 10:24:20

基于Kubernetes部署MySQL主从集群

以下是一个基于Kubernetes部署MySQL主从集群的详细YAML示例，包含StatefulSet、Service、ConfigMap和Secret等关键配置。MySQL主从集群需要至少1个主节点和多个从节点，这里使用 StatefulSet 初始化脚本实现主从自动配置。 1. 创建 Namespace (可选) ap…...

编程日记 2025/8/22 2:38:04

VMware中安装配置Ubuntu（2024最新版超详细）

目录一、安装虚拟机软件二、VMware虚拟机三、 Ubuntu 下载 （1）官网下载 （2）清华镜像网站下载四、创建虚拟机五、Ubuntu 系统安装过程的配置六、更换国内镜像源七、环境搭建完毕全篇较长，请慢慢观看一…...

编程日记 2025/8/19 15:08:15

【Linux】信号处理以及补充知识

目录一、信号被处理的时机： 1、理解： 2、内核态与用户态： 1、概念： 2、重谈地址空间： 3、处理时机： 补充知识： 1、sigaction： 2、函数重入： 3、volatile&…...

编程日记 2025/8/19 22:49:50

如何在rust中解析 windows 的 lnk文件（快捷方式）

一、从标题二开始看😁 这些天在使用rust写一个pc端应用程序，需要解析lnk文件获取lnk的图标以及原程序地址，之前并没有过pc端应用程序开发的经验， 所以在广大的互联网上游荡了两天。额🥺 今天找到了这个库 lnk_parse很…...

编程日记 2025/8/23 8:01:06

大模型系列课程学习-基于Vllm/Ollama/Ktransformers完成Deepseek推理服务部署

1.机器配置及实验说明基于前期搭建的双卡机器装机教程，配置如下： 硬件名称参数备注CPUE5-2680V42 *2（线程28个）无GPU2080TI-22G 双卡魔改卡系统WSL Unbuntu 22.04.5 LTS虚拟机本轮实验目的：基于VLLM/Ollama/ktran…...

编程日记 2025/8/20 7:59:32

Unity Shader学习总结

1.帧缓冲区和颜色缓冲区区别用于存储每帧每个像素颜色信息的缓冲区帧缓冲区包括：颜色缓冲区深度缓冲区模板缓冲区自定义缓冲区 2.ImageEffectShader是什么后处理用的shader模版 3.computerShader 独立于渲染管线之外，在显卡上运行，大量…...

编程日记 2025/8/22 13:28:02

Java多线程与高并发专题——什么是阻塞队列？

引入阻塞队列（Blocking Queue）是一种线程安全的队列数据结构，它的主要特点是： 线程安全：多个线程可以安全地同时访问队列。阻塞操作：当队列为空时，从队列中获取元素的操作会被阻塞&#xff0…...

编程日记 2025/8/22 21:12:46

【Recon】CTF Web类题目主要类型

CTF Web类题目主要类型 1. 信息搜集类2. 注入类漏洞3. 文件处理漏洞4. 身份验证与会话漏洞5. 服务端漏洞6. 客户端漏洞7. 代码审计与PHP特性8. 业务逻辑漏洞总结 CTF（Capture The Flag）竞赛中的Web类题目主要考察参赛者对Web应用漏洞的识别与利用能力&am…...

编程日记 2025/8/22 4:33:46

comfyui（python）下载insightface失败

使用comfyui时，安装插件zenid、instantid、ip-adapter等换脸插件时，因为依赖insightface安装失败，导致插件中的节点无法正常使用，需要单独安装insightface。下载insightface到本地，下载地址选择与自己python版本一致…...

编程日记 2025/8/22 13:58:30

1. 安装 compression-webpack-plugin

2. 配置 compression-webpack-plugin

3.部署上线实际效果

相关文章：

1. 安装 `compression-webpack-plugin`

2. 配置 `compression-webpack-plugin`