当前位置: 首页 > 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占用本地资源 需要在设备本地存储较大的…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...