使用GZip对npm run build打包的vendor.js文件进行压缩

news2024/11/13 8:03:30

vue-cli项目

  1. 安装npm i compression-webpack-plugin -D
npm i compression-webpack-plugin -D
  1. 使用:在vue.config.js文件中
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
    configureWebpack: {
        plugins: [
            new CompressionPlugin({
                test: /\.js$|\.html$|\.css/,
                threshold: 10240 // 只处理比这个值大的资源。按字节计算 设置的是 10kb
            })
        ]
    }
}

在这里插入图片描述
可以看到1.2M的vendors文件压缩到了295k,网页运行速度得到了提升,3
s内可以打开。
如果样式不识别,那么就不压缩css文件了。这个功能需要后端开启gzip,可以识别这类文件。

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

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

相关文章

html+css+js贪吃蛇游戏

贪吃蛇游戏&#x1f579;四个按钮控制方向&#x1f3ae; 源代码在图片后面 点赞❤️关注&#x1f64f;收藏⭐️ 互粉必回&#x1f64f;&#x1f64f;&#x1f60d;&#x1f60d;&#x1f60d; 源代码&#x1f4df; <!DOCTYPE html> <html lang"en"&…

【2024最新】Arduino通过Python进行串口通信控制电机

1. 背景 最近想研究一下用 Python 控制 Arduino 的技术&#xff0c;通过上网查询&#xff0c;发现可以用 Python 中的 serial 库来实现和 Arduino 主板的串口通信&#xff0c;从而控制 Arduino。 特此记录一下这个小项目的过程及出现的问题。 2. 基础准备 主板&#xff1a;…

中仕公考:“三支一扶”岗位分别做什么工作?

“三支一扶”计划旨在招募应届毕业生或近两年内毕业的毕业生&#xff0c;部分省份还考虑技工院校高级工班、预备技师班毕业生。在湖北省&#xff0c;报考支医岗位不限制毕业年限&#xff0c;安徽和云南等省对支医类岗位取消了开考比例要求。为解决招人留人难题&#xff0c;艰苦…

毛绒玩具音乐芯片:OTP语音芯片WTN6040方案解析

随着科技的不断发展&#xff0c;智能化和互动性已经成为玩具设计中的关键因素。在毛绒玩具市场中&#xff0c;集成音乐播放功能的毛绒玩具因其趣味性和互动性而备受欢迎。本文将详细介绍OTP&#xff08;One Time Programmable&#xff09;语音芯片WTN6040在毛绒玩具音乐芯片中的…

网页UI:被客户说不大气!大气能当饭吃?真能,最起码保住你饭碗

大气的网页UI设计可以带来以下几个好处&#xff1a; 提升品牌形象&#xff1a;大气的设计能够给用户留下深刻的印象&#xff0c;增强品牌的认知度和形象。通过精心设计的元素、色彩和排版&#xff0c;可以传达出品牌的专业、高端和可信赖的形象。强化用户体验&#xff1a;大气…

SpringBoot开发实用篇(二)

目录 一&#xff1a;Redis 1&#xff1a;SpringBoot整合Redis 2&#xff1a;SpringBoot读写Redis的客户端 3&#xff1a;SpringBoot操作Redis实现技术切换&#xff08;jedis&#xff09; 二&#xff1a;Mongodb 1&#xff1a;Mongodb基础操作 2&#xff1a;SpringBoot整合…

【DataSophon】DataSophon1.2.1 ranger usersync整合

目录 一、简介 二、实现步骤 2.1 ranger-usersync包下载编译 2.2 构建压缩包 2.3 编辑元数据文件 2.4 修改源码 三、重新安装 一、简介 如下是DDP1.2.1默认有的rangerAdmin&#xff0c; 我们需要将rangerusersync整合进来 ,实现将Linux机器上的用户和组信息同步到Ranger…

『粽享端午』交互小程序 小游戏 案例赏析

在这片古老而又年轻的土地上&#xff0c;地域的差异孕育了丰富多彩的饮食文化。粽子&#xff0c;作为端午节的象征&#xff0c;承载着南咸北甜的口味之争&#xff0c;自古便在人们舌尖上演绎着不同的风味传奇。 然而&#xff0c;在快节奏的现代生活洪流中&#xff0c;我们渐渐失…

家谱管理系统

《家谱管理系统》 一个家谱关系由若干家谱记录构成&#xff0c;每个家谱记录由父亲、母亲和子女姓名构成&#xff0c;其中姓名是关 键字。设计并实现一个简单的家谱管理系统。定义一个主菜单&#xff0c;界面友好&#xff0c;演示程序以用户和计算机的对话方式进行&#xff0c…

开关电源——调制模式和工作模式

一、开关电源的调制模式 开关电源作为一种广泛应用于电子设备中&#xff0c;用于将一定电压和电流转换为另一种电压和电流的技术&#xff0c;以下是开关电源三种常见的调制模式&#xff1a; 脉冲宽度调制&#xff08;Pulse Width Modulation&#xff09; 脉冲频率调制&#xff…

触发器编程-创建(CREATE TRIGGER)、删除(DROP TRIGGER)

一、定义 1、触发器&#xff08;Trigger&#xff09;是用户对某一表中的数据做插入、更新和删除操作时被处罚执行的一段程序&#xff0c;通常我们使用触发器来检查用户对表的操作是否合乎整个应用系统的需求&#xff0c;是否合乎商业规则以维持表内数据的完整性和正确性 2、一…

从nginx返回404来看http1.0和http1.1的区别

序言 什么样的人可以称之为有智慧的人呢&#xff1f;如果下一个定义&#xff0c;你会如何来定义&#xff1f; 所谓智慧&#xff0c;就是能区分自己能改变的部分&#xff0c;自己无法改变的部分&#xff0c;努力去做自己能改变的&#xff0c;而不要天天想着那些无法改变的东西&a…

AI视频教程下载-使用ChatGPT成为全栈JavaScript开发者

学习使用Express JS和React JS进行全栈JavaScript开发 ChatGPT Express JS MongoDB React JS Tailwind 解锁全栈网页开发的世界&#xff0c;我们为初学者和中级学习者设计了全面的课程。在这段沉浸式的旅程中&#xff0c;你将深入前端和后端开发的基本概念&#xff0c;为自…

everything高级搜索-cnblog

everything高级搜索用法 基础4选项验证 总结搜索方式 高级搜索搜指定路径文件名: 文件名 路径不含文件名: &#xff01;文件名包含单词 路径包含指定内容: 路径 content:内容 大小写 区分大小写搜索搜指定路径文件名: case:文件名 路径全字匹配 全字搜指定路径文件名: wholewo…

【网络安全】实验六(网络安全协议的应用SSL,Ipsec)

一、实验目的 二、搭配环境 打开两台虚拟机&#xff0c;并参照下图&#xff0c;搭建网络拓扑环境&#xff0c;要求两台虚拟机的IP地址要按照图中的标识进行设置&#xff0c;并根据搭建完成情况&#xff0c;勾选对应选项。同时&#xff0c;按照多选题中2-3题的要求完成相关环境…

java核心-泛型

目录 概述什么是泛型分类泛型类泛型接口泛型方法 泛型通配符分类 泛型类型擦除分类无限制类型擦除有限制类型擦除 问题需求第一种第二种 概述 了解泛型有利于学习 jdk 、中间件的源码&#xff0c;提升代码抽象能力&#xff0c;封装通用性更强的组件。 什么是泛型 在定义类、接…

web安全基础名词概念

本节内容根据小迪安全讲解制作 第一天 域名&#xff1a; 1.1什么是域名&#xff1f; 网域名称(英语&#xff1a;Domain Name&#xff0c;简称&#xff1a;Domain)&#xff0c;简称域名、网域&#xff0c;是由一串用点分隔的字符组成的互联网上某一台计算机或计算机组的名称&a…

YoloV9改进策略:Block改进|轻量实时的重参数结构|最新改进|即插即用(全网首发)

摘要 本文使用重参数的Block替换YoloV9中的RepNBottleneck&#xff0c;GFLOPs从239降到了227&#xff1b;同时&#xff0c;map50从0.989涨到了0.99&#xff08;重参数后的结果&#xff09;。 改进方法简单&#xff0c;只做简单的替换就行&#xff0c;即插即用&#xff0c;非常…

Python酷库之旅-第三方库Pandas(009)

目录 一、用法精讲 19、pandas.read_xml函数 19-1、语法 19-2、参数 19-3、功能 19-4、返回值 19-5、说明 19-6、用法 19-6-1、数据准备 19-6-2、代码示例 19-6-3、结果输出 20、pandas.DataFrame.to_xml函数 20-1、语法 20-2、参数 20-3、功能 20-4、返回值 …

Cyber Weekly #14:WAIC 2024

赛博新闻 1、WAIC2024开幕&#xff1a;一半机器人&#xff0c;一半大模型 7月4日&#xff0c;AI界春晚——2024世界人工智能大会&#xff08;WAIC 2024&#xff09;在上海开幕&#xff0c;大会展示了500家企业的1500项展品&#xff0c;突出了机器人和大模型技术。国产机器人和…