MineAdmin 前端打包后,访问速度慢原因及优化

news2024/11/20 14:35:47

前言:打包mineadmin-vue前端后,访问速度很慢,打开控制台,发现有一个index-xxx.js文件达7M+,加载时间太长;

优化:

一:使用文件压缩(gzip压缩)

1、安装compression-webpack-plugin插件

npm i compression-webpack-plugin --save

2、配置nginx,开启gzip

# nginx.conf 文件配置
http { 

    ...

   #开启和关闭gzip模式
    gzip on;
    #gizp压缩起点,文件大于2k才进行压缩;设置允许压缩的页面最小字节数,页面字节数从header头得content-length中进行获取。 默认值是0,不管页面多大都压缩。建议设置成大于2k的字节数,小于2k可能会越压越大。
    gzip_min_length 2k;
    # 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区
    gzip_buffers 4 16k;
    # 设置gzip压缩针对的HTTP协议版本
    gzip_http_version 1.0;
    # gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
    gzip_comp_level 3;
    # 进行压缩的文件类型
    gzip_types text/plain application/javascript text/css application/xml;
    # 是否在http header中添加Vary: Accept-Encoding,建议开启
    gzip_vary on;
    # 不对 IE6 及更低版本进行压缩
    gzip_disable "msie6";
}

# 前端 域名.conf 文件配置
service {
    listen 80;
    server_name www.xxx.com;
    
    ...

    # 开启 gzip_static
    gzip_static on;

}

3、重启nginx,重新打包

4、打开网页GZIP压缩检测 - 站长工具 测试前端域名

这一步大概能把7M文件压缩到2M左右,速度快了一些,但还是不够。

二、代码分割 (待续)

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

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

相关文章

【乐吾乐3D可视化组态编辑器】数据接入

数据接入 本文为您介绍3D数据接入功能,数据接入功能分为三个步骤:数据订阅、数据集管理、数据绑定 编辑器地址:3D可视化组态 - 乐吾乐Le5le 数据订阅 乐吾乐3D组态数据管理功能由次顶部工具栏中按钮数据管理打开。 在新弹窗中选择数据订阅…

【C/C++】IO流

目录 前言: 一,C语言的I/O流 二,C的I/O流 2-1,C标准IO流 2-2,IO流的连续输入 前言: “流”即是流动的意思,是物质从一处向另一处流动的过程,是对一种有序连续且具有方向性的数据…

【计算机网络】初识IP协议

前言 IP协议,可谓是程序猿必备的基础功之一,这不仅仅是因为IP协议为面试的常客,更是因为IP协议为整个网络协议中最重要、最常被人接触的一种协议。例如IP地址就几乎为所有人所熟知的一种概念,无论是浏览网页、聊天、打游戏&#x…

网络编程: 高级IO与多路转接select,poll,epoll的使用与介绍

网络编程: 高级IO与多路转接select,poll,epoll的使用与介绍 前言一.五种IO模型1.IO的本质2.五种IO模型1.五种IO模型2.同步IO与异步IO3.IO效率 二.非阻塞IO1.系统调用介绍2.验证代码 三.select多路转接1.系统调用接口2.写代码 : 基于select的TCP服务器1.封装的Socket接口2.开始写…

HarmonyOS NEXT星河版之自定义List下拉刷新与加载更多

文章目录 一、加载更多二、下拉刷新三、小结 一、加载更多 借助List的onReachEnd方法,实现加载更多功能,效果如下: Component export struct HPList {// 数据源Prop dataSource: object[] []// 加载更多是否ingState isLoadingMore: bool…

WebGIS常用技术体系记录

1、数据下载 (1)OSM下载开源矢量数据,数据较全,但是质量一般; (2)地理空间数据云下载DEM影像; (3)datav下载行政区 http://datav.aliyun.com/tools/atlas/…

了解Maven,并配置国内源

目录 1.了解Maven 1.1什么是Maven 1.2快速创建一个Maven项⽬ 1.3Maven 核⼼功能 1.3.1项⽬构建 1.3.2依赖管理 1.4Maven Help插件 2.Maven 仓库 2.1中央仓库 2.2本地仓库 3.Maven 设置国内源 1.查看配置⽂件的地址 2.配置国内源 3.设置新项⽬的setting 1.了解Ma…

【iOS】Runtime

文章目录 前言一、Runtime简介二、NSObject库起源isaisa_t结构体cache_t的具体实现class_data_bits_t的具体实现 三、[self class] 与 [super class]四、消息发送与转发五、Runtime应用场景 前言 之前分part学习了Runtime的内容,但是没有系统的总结,这篇…

自然语言处理(NLP)—— 主题建模

1. 主题建模的概念 主题建模(Topic Modeling)是一种用于发现文档集合(语料库)中的主题(或称为主题、议题、概念)的统计模型。在自然语言处理和文本挖掘领域,主题建模是理解和提取大量文本数据隐…

vue-$set修改深层对象的值

背景: 点击编辑按钮,打开修改预算的抽屉,保存后更新此行数据的预算,以前是调接口刷新表格,这次的数据是由前端处理更新,由于数据层级比较深,使用$set来修改两层嵌套对象 使用方法: …

upload-labs-第五关

目录 第五关 1、构造.user.ini文件 2、构造一个一句话木马文件,后缀名为jpg 3、上传.user.ini文件后上传flag.jpg 4、上传成功后访问上传路径 第五关 原理: 这一关采用黑名单的方式进行过滤,不允许上传php、php3、.htaccess等这几类文件…

3D按F3为什么显示不出模型?---模大狮模型网

对于3D建模软件的用户来说,按下F3键通常是用来显示或隐藏模型的功能之一。然而,有时当按下F3键时,却无法正确显示模型,这可能会让用户感到困惑。模大狮将探讨这种情况发生的可能原因以及解决方法,帮助设计师们更好地理…

快速搭建高效运营体系,Xinstall App下载自动绑定助您一臂之力

在互联网的浪潮中,App的推广与运营面临着诸多挑战。如何在多变的互联网环境下迅速搭建起能时刻满足用户需求的运营体系,成为了众多企业关注的焦点。今天,我们就来聊聊如何通过Xinstall的App下载自动绑定功能,轻松解决App推广与运营…

[word] word文档字体间距怎么调整? #其他#经验分享

word文档字体间距怎么调整? 调整word文档字体间距的方法: 打开一个预先写好文字的文档。选中所有文字,点击字体右下角的“更多选项”。 在弹出的“字体”对话框中进入“字符间距”选项卡,在“间距”选项中即可设置字体间距。 设…

智慧视觉怎么识别视频?智慧机器视觉是通过什么步骤识别视频的?

智慧视觉功能怎么识别视频?智慧视觉是搭载在智能设备比如手机、AI盒子、机器视觉系统上的一个应用程序或特性,采用计算机视觉和人工智能的技术来识别图像或视频中的内容。如果想了解视频识别,就要明白智慧视觉功能会涉及的以下几个关键步骤和…

知识图谱的应用---智慧司法

文章目录 智慧司法典型应用 智慧司法 智慧司法是综合运用人工智能、大数据、互联网、物联网、云计算等信息技术手段,遵循司法公开、公平、公正的原则,与司法领域业务知识经验深度融合,使司法机关在审判、检查、侦查、监管职能各方面得到全面的…

OpenShift 4 - OpenShift Service Mesh 3 预览

《OpenShift / RHEL / DevSecOps 汇总目录》 了解 OpenShift Service Mesh 3 的变化 OpenShift Service Mesh 是一套在 OpenShift 上安装部署、跟踪监控 Istio 运行环境的实现。红帽在 2023 年底推出了技术预览版的 OpenShift Service Mesh 3,它和目前的 OpenShif…

经典神经网络(10)PixelCNN模型、Gated PixelCNN模型及其在MNIST数据集上的应用

经典神经网络(10)PixelCNN模型、Gated PixelCNN模型及其在MNIST数据集上的应用 1 PixelCNN PixelCNN是DeepMind团队在论文Pixel Recurrent Neural Networks (16.01)提出的一种生成模型,实际上这篇论文共提出了两种架构:PixelRNN和PixelCNN,两…

鸿蒙开发的南向开发和北向开发

鸿蒙开发主要分为设备开发和应用开发两个方向,也叫南向开发和北向开发: 鸿蒙设备开发(南向开发),要侧重于硬件层面的开发,涉及硬件接口控制、设备驱动开发、鸿蒙系统内核开发等,目的是使硬件设备能够兼容并…

Linux环境---在线安装MYSQL数据库

Linux环境—在线安装MYSQL数据库 一、使用步骤 1.安装环境 Mysql 驱动 8.0 需要 jdk1.8 才行。 JDK版本:1.8 参考文档 MYSQL版本:8.0.2 下载链接: https://pan.baidu.com/s/1MwXIilSL6EY3OuS7WtpySA?pwdg263 操作系统:CentOS 1.1 建立存…