常规VUE项目优化实践,跟着做就对了!

总结:

主要优化方式:

  1. imagemin优化打包大小(96M->50M),但是以打包速度为代价,通过在构建过程中压缩图片来实现,可根据需求开启。
  2. 字体压缩:目前项目内引用为思源字体,打包为24M。实践通过压缩字体会导致丢失一些属性,而字蛛等插件压缩只支持静态资源,对服务端获取的数据无法完美匹配。
    目前解决方案,仅用SourceHanSansSC-Medium字体,舍弃Normal及Regular字体。
  3. Gzip前端(50M->46M)针对css,js等代码进行压缩。
  4. Gzip服务端(通过nginx.conf的镜像文件实现前端配置)
  5. 本地构建速度(134s->67s):通过引入CDN和Echarts按需加载方式提升本地构建速度,目前已接近优化的极限,因为目前项目基本框架为vben-admin(官网并不推荐,后期为更换为vben-admin-thin,官网纯净版代码打包速度为122s)

仍需优化:

  1. 服务端用pnpm(官网推荐,下载,打包速度更快)
  2. 删除框架内无用的组件(可更换为vben-admin-thin一劳永逸)

以下为详情过程~

dev环境现况:

在这里插入图片描述

● LCP (Largest Contentful Paint) 代表的是视窗最大可见图片或者文本块的渲染时间。一般是至少75%用户能够在2.5秒内。
在这里插入图片描述

● 项目打包为将近97M
在这里插入图片描述

● 本地构建速度约134s。

具体步骤:

1、安装 rollup-plugin-visualizer 插件,此插件可以展示构建时长、chunk 数量及大小,目前可以分析为项目内最大占比为静态资源。
在这里插入图片描述

2、通过imagemin插件压缩图片并删除无用图上,压缩后的体积减少到50M

在这里插入图片描述
在这里插入图片描述

3、gzip前端代码压缩
4、cdn引入的vue, vue-router ,ant-design-vue
5、按需加载echarts
在这里插入图片描述

现况:
● 打包后的体积为46M
● 可以看到目前最大的模块不再是静态资源 而是echarts等外部资源库
在这里插入图片描述

● 同样以我本地为测试环境,打包速度优化至65s
在这里插入图片描述

● 优化后的首屏加载速度为2s内

在这里插入图片描述

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

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

相关文章

认识所有权

专栏简介:本专栏作为Rust语言的入门级的文章,目的是为了分享关于Rust语言的编程技巧和知识。对于Rust语言,虽然历史没有C、和python历史悠远,但是它的优点可以说是非常的多,既继承了C运行速度,还拥有了Java…

C++——文件操作

一、文本文件 C中输入输出是通过流对象进行操作,对于文件来说写文件就是将内容从程序输出到文件,需要用到写文件流ofstream;而读文件就是将内容从文件输入到程序,需要用到读文件流ifstream;这两个文件流类都包含在头文…

f1tenth的多点导航+路径规划+pursuit追踪

文章目录 一、发布起点,终点二、 记录规划轨迹点三、pursuit追踪一、发布起点,终点 pub_amcl: #!/usr/bin/env python3import rospy from geometry_msgs.msg import PoseWithCovarianceStampeddef publish_amcl_pose():# 初始化节点rospy.init_node(amcl_pose_publisher)# …

oracle的管道函数

Oracle管道函数(Pipelined Table Function)oracle管道函数 1、管道函数即是可以返回行集合(可以使嵌套表nested table 或数组 varray)的函数,我们可以像查询物理表一样查询它或者将其赋值给集合变量。 2、管道函数为并行执行,在…

P1257 平面上的最接近点对

题目 思路 详见加强加强版 代码 #include<bits/stdc.h> using namespace std; #define int long long const int maxn4e510; pair<int,int> a[maxn]; int n; double d1e16; pair<int,int> vl[maxn],vr[maxn]; void read() { cin>>n;for(int i1;i<…

Android性能优化—数据结构优化

优化数据结构是提高Android应用性能的重要一环。在Android开发中&#xff0c;ArrayList、LinkedList和HashMap等常用的数据结构的正确使用对APP性能的提升有着重大的影响。 一、ArrayList ArrayList内部使用的是数组&#xff0c;默认大小10&#xff0c;当数组长度不足时&…

二叉排序树(二叉查找树)

二叉排序树&#xff08;二叉查找树&#xff09;的性质&#xff1a; 若它的左子树不为空&#xff0c;则左子树上所有结点的值均小于它的根结点的值。若它的右子树不为空&#xff0c;则右子树上所有结点的值均大于它的根将诶点的值。它的左、右子树也分别为二叉排序树。 对二叉…

[Docker实现测试部署CI/CD----自由风格的CI操作[中间架构](4)]

目录 10、自由风格的CI操作&#xff08;中间架构&#xff09;中间架构图创建web项目Idea提交项目到远程仓库提交代码到本地库提交代码到远程库从jenkins拉取代码新建任务jenkins集成gitlab立即构建 将项目打为jar包Jenkins 配置 mvn 命令重新构建 代码质量检测jenkins将代码推送…

Java on Azure Tooling 6月更新|标准消费和专用计划及本地存储账户(Azurite)支持

作者&#xff1a;Jialuo Gan - Program Manager, Developer Division at Microsoft 排版&#xff1a;Alan Wang 大家好&#xff0c;欢迎阅读 Java on Azure 工具的六月更新。在本次更新中&#xff0c;我们将介绍 Azure Spring Apps 标准消费和专用计划支持以及本地存储账户&…

对作用域、作用域链的理解

全局作用域和函数作用域 全局作用域 最外层函数和最外层函数外面定义的变量拥有全局作用域 所有未定义直接赋值的变量自动声明为全局作用域 所有 window 对象的属性拥有全局作用域 全局作用域有很大的弊端&#xff0c;过多的全局作用域变量会污染全局命名空 间&#xff0c;容…

黑马大数据学习笔记5-案例

目录 需求分析背景介绍目标需求数据内容DBeaver连接到Hive建库建表加载数据 ETL数据清洗数据问题需求实现查看结果扩展 指标计算需求需求指标统计 可视化展示BIFineBI的介绍及安装FineBI配置数据源及数据准备 可视化展示 P73~77 https://www.bilibili.com/video/BV1WY4y197g7?…

如何使用自己域名进行远程访问内网群晖NAS 6.X

使用自己的域名远程访问内网群晖NAS 6.X【内网穿透】 文章目录 使用自己的域名远程访问内网群晖NAS 6.X【内网穿透】 在之前的文章中&#xff0c;我们向大家演示了如何使用cpolar&#xff0c;创建一条固定的、能够在公共互联网登录内网群晖NAS的数据隧道。这条隧道已经能够应对…

深度分析卡尔曼滤波算法原理

一、什么是卡尔曼滤波? 你可以在任何含有不确定信息的动态系统中使用卡尔曼滤波&#xff0c;对系统下一步的走向做出有根据的预测&#xff0c;即使伴随着各种干扰&#xff0c;卡尔曼滤波总是能指出真实发生的情况。 在连续变化的系统中使用卡尔曼滤波是非常理想的&#xff0c…

java+springboot摄影作品竞赛报名系统 微信小程序--论文

随着Internet的发展&#xff0c;人们的日常生活已经离不开网络。未来人们的生活与工作将变得越来越数字化&#xff0c;网络化和电子化。网上管理&#xff0c;它将是直接管理摄影竞赛小程序的最新形式。本小程序是以构建摄影竞赛为目标&#xff0c;使用java技术制作&#xff0c;…

程序员编写文档的 10 个技巧

编写好的文档在软件开发领域具有重大意义。文档是概述特定问题陈述、方法、功能、工作流程、架构、挑战和开发过程的书面数据或指令。文档可以让你全面了解解决方案的功能、安装和配置。 文档不仅是为其他人编写的&#xff0c;也是为自己编写的。它让我们自己知道我们以前做过什…

大数据Flink(五十八):Flink on Yarn的三种部署方式介绍

文章目录 Flink on Yarn的三种部署方式介绍 一、​​​​​​​Session模式

F5 LTM 知识点和实验 12-使用规则和本地流量策略定制应用程序交付

第十一章:iapp(忽略) 第十二章:使用规则和本地流量策略定制应用程序交付 用最简单的术语来说,iRule是在网络流量通过BIGIP系统时对其执行的脚本。其思想非常简单:规则使您能够编写简单的网络感知代码片段,这些代码以各种方式影响您的网络流量。无论您是希望以BIG-IP内置…

2 Vue使用v-bind来代替{{}}取值

注意&#xff01;当两个具有共同id的标签都要从数据层拿值时&#xff0c;需要使用div标签&#xff0c;赋予他们共同的id&#xff0c;不然其中有一个会拿不到数据&#xff01; v-bind用来绑定前标签的属性&#xff0c;然后对属性赋值。{{}}用来对前后标签中的文本赋值。使用方法…

前沿分享-100 μAh 微型电池

这是SMD 组件形状的固态锂离子微型电池&#xff0c;容量高达 100Ah&#xff0c;在22年的慕尼黑电子展上出现过。 因为是可重复使用的&#xff0c;未来该产品甚至有机会取代容量更高&#xff08;例如100 Ah 时&#xff09;的不可充电硬币电池。 一般应用于超低功率的传感器&…

宋浩概率论笔记(四)数字特征

本帖更新数字特征&#xff0c;包含期望、方差、相关系数等&#xff0c;要点在于记忆性质中的各种公式&#xff0c;遇到题目时能迅速利用已知条件计算答案。