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

在使用 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.部署上线实际效果


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大型语言模型训练的三个阶段:Pre-Train、Instruction Fine-tuning、RLHF (PPO / DPO / GRPO)

前言 如果你对这篇文章可感兴趣,可以点击「【访客必读 - 指引页】一文囊括主页内所有高质量博客」,查看完整博客分类与对应链接。 当前的大型语言模型训练大致可以分为如下三个阶段: Pre-train:根据大量可获得的文本资料&#…

模型压缩技术(二),模型量化让模型“轻装上阵”

一、技术应用背景 在人工智能蓬勃发展的浪潮下,大模型在自然语言处理、计算机视觉等诸多领域大放异彩,像知名的GPT以及各类开源大语言模型,其规模与复杂度持续攀升。然而,这一发展也带来了挑战,模型越大,对…

机器学习:愚者未完成的诗篇(零)

当算法在数据海洋中打捞支离破碎的韵律时,机器学习系统展现出的智慧如同断臂的维纳斯雕像——完美与残缺构成令人战栗的美学悖论。愚者,在词语的混沌中编织逻辑经纬,却总在即将触及诗性本质的瞬间,暴露出认知维度的致命裂隙。 一…

【算法题】小鱼的航程

问题: 分析 分析题目,可以看出,给你一个开始的星期,再给一个总共天数,在这些天内,只有周六周日休息,其他全要游泳250公里。 那分支处理好啦 当星期为6时,需要消耗2天,…

GStreamer —— 2.5、Windows下Qt加载GStreamer库后运行 - “教程5:GUI 工具包集成(gtk)“(附:完整源码)

运行效果 简介 上一个教程演示了时间管理及seek操作。本教程介绍如何将 GStreamer 集成到图形用户中 接口 (GUI) 工具包,如 GTK。基本上 GStreamer 负责媒体播放,而 GUI 工具包处理 用户交互。最有趣的部分是那些 库必须进行交互&…

NLTK和jieba

NLTK与jieba概述 自然语言处理(NLP)领域是计算机科学领域与人工智能领域中的一个重要方向,主要研究方向是实现人与计算机之间用自然语言进行有效通信的各种理论和方法。 在自然语言处理领域中,文本类型的数据占据着很大的市场&a…

linux查看定时任务与设置定时任务

一、查看定时任务 使用 cron 查看当前用户的定时任务: bash crontab -l # 查看当前用户的cron任务 查看系统级定时任务: bash 系统级任务通常存放在以下位置: cat /etc/crontab # 系统主配置文件 ls /etc/cron.d/ # 系统级任务片段 ls /…

DeepSeek-R1本地化部署(Mac)

一、下载 Ollama 本地化部署需要用到 Ollama,它能支持很多大模型。官方网站:https://ollama.com/ 点击 Download 即可,支持macOS,Linux 和 Windows;我下载的是 mac 版本,要求macOS 11 Big Sur or later,Ol…

支持向量简要理解

决策方程符合感知机区分理论,我们基于线性代数来看这满足子空间理论,可以获取得到超平面。 支持向量机的目标是寻找最与超平面最近的点的最大距离,而距离计算如上,符合数学上计算点到线(面)的距离公式。 …

使用OpenCV和MediaPipe库——实现人体姿态检测

目录 准备工作如何在Windows系统中安装OpenCV和MediaPipe库? 安装Python 安装OpenCV 安装MediaPipe 验证安装 代码逻辑 整体代码 效果展示 准备工作如何在Windows系统中安装OpenCV和MediaPipe库? 安装Python 可以通过命令行运行python --versio…

5G学习笔记之BWP

我们只会经历一种人生,我们选择的人生。 参考:《5G NR标准》、《5G无线系统指南:如微见著,赋能数字化时代》 目录 1. 概述2. BWP频域位置3. 初始与专用BWP4. 默认BWP5. 切换BWP 1. 概述 在LTE的设计中,默认所有终端均能处理最大2…

创建Electron35 + vue3 + electron-builder项目,有很过坑,记录过程

环境: node v20.18.0 npm 11.1.0 用到的所有依赖: "dependencies": {"core-js": "^3.8.3","vue": "^3.2.13","vue-router": "^4.5.0"},"devDependencies": {"ba…

Linux下安装elasticsearch(Elasticsearch 7.17.23)

Elasticsearch 是一个分布式的搜索和分析引擎,能够以近乎实时的速度存储、搜索和分析大量数据。它被广泛应用于日志分析、全文搜索、应用程序监控等场景。 本文将带你一步步在 Linux 系统上安装 Elasticsearch 7.17.23 版本,并完成基本的配置&#xff0…

NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南

一、驱动安装 1、下载驱动 前往NVIDIA驱动下载页,输入显卡型号和操作系统类型,选择≥目标CUDA版本要求的驱动版本‌。 2、安装驱动‌ ‌Windows‌:双击安装包按向导操作。‌Linux‌:建议使用apt或官方.run文件安装‌。 3、验证…

plt和cv2有不同的图像表示方式和颜色通道顺序

在处理图像时,matplotlib.pyplot (简称 plt) 和 OpenCV (简称 cv2) 有不同的图像表示方式和颜色通道顺序。了解这些区别对于正确处理和显示图像非常重要。 1. 图像形状和颜色通道顺序 matplotlib.pyplot (plt) 形状:plt 通常使用 (height, width, cha…

基于PyTorch的深度学习5——神经网络工具箱

可以学习如下内容: • 介绍神经网络核心组件。 • 如何构建一个神经网络。 • 详细介绍如何构建一个神经网络。 • 如何使用nn模块中Module及functional。 • 如何选择优化器。 • 动态修改学习率参数。 5.1 核心组件 神经网络核心组件不多,把这些…

模拟调制技术详解

内容摘要 本文系统讲解模拟调制技术原理及Matlab实现,涵盖幅度调制的四种主要类型:双边带抑制载波调幅(DSB-SC)、含离散大载波调幅(AM)、单边带调幅(SSB)和残留边带调幅(…

aws(学习笔记第三十一课) aws cdk深入学习(batch-arm64-instance-type)

aws(学习笔记第三十一课) aws cdk深入学习 学习内容: 深入练习aws cdk下部署batch-arm64-instance-type 1. 深入练习aws cdk下部署batch-arm64-instance-type 代码链接 代码链接 代码链接 -> batch-arm64-instance-type之前代码学习 之前学习代码链接 -> aw…

读书报告」网络安全防御实战--蓝军武器库

一眨眼,20天过去了,刷完了这本书「网络安全防御实战--蓝军武器库」,回味无穷,整理概览如下,可共同交流读书心得。在阅读本书的过程中,我深刻感受到网络安全防御是一个综合性、复杂性极高的领域。蓝军需要掌…

生成任务,大模型

一个生成项目 输入:文字描述(但是给的数据集是一串数字,id,ct描述,医生描述) 输出:诊断报告 一、数据处理 import pandas as pd #处理表格数据pre_train_file "data/train.csv"tr…