单页面首屏优化,打包后大小减少64M,加载速度快了13.6秒

需求背景

  1. 从第三方采购的vue2 + ElementUI实现的云管平台,乙方说2011年左右就开始有这个项目了(那时候有Vue了吗,思考.jpg)。十几年的项目,我何德何能可以担此责任。里面的代码经过多人多年迭代可以用惨不忍睹来形容,吐槽归吐槽,混口饭吃,多烂的代码都得啃下去。
  2. 有一天领导找到我,问我怎么回事,打开页面需要十几秒时间也太慢了,后台管理系统不要求首屏加载时间都没有这么慢,这个对外的系统超过1秒打开时间,都会流失很多客户,不优化好年终自己看着办吧。
  3. 什么?影响年终?好的领导,我马上抽时间解决(🐂🐴)。

如何看优化是否做到位?

1. Lighthouse谷歌插件,从首页打开速度分析页面的性能,并给出指标和打分。

  • 如何使用Lighthouse?
  • F12打开控制台 - Lighthouse
  • 如下图所示选择,然后点击Anlyze page load就可以了
  • 这里只关注性能所以只勾选了Performance指标,其他可访问性、SEO有需求一同检测的自行勾选上。
    image.png

2. webpack-bundle-analyzer插件,分析代码打包大小的工具。

  • 如何使用webpack-bundle-analyzer?
  • npm install --save-dev webpack-bundle-analyzer安装依赖
// webpack.config.js配置文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;  module.exports = {  // ... 其他配置 ...  plugins: [  new BundleAnalyzerPlugin()  ]  
};
  • 这样在打包的时候会生成一个静态网站查看各个模块占用的存储空间大小
    image.png

优化成果(有图有真相) 🔥

LightHouse性能指标解释:
FCP:衡量的是打开网页后,浏览器渲染第一段 DOM 内容所用的时间
LCP:用于测量视口中最大的内容元素何时渲染到屏幕上。这粗略地估算出网页主要内容何时对用户可见。
因为要优化的页面没有像官网那样有轮播图占据大量显示位置的元素,所以我主要关注FCP,FCP解决LCP也会相应变快

1. 优化前首页加载速度(FCP 15.8s)

image.png

2. 优化前体积(打包后大小80.5M)

Stat: 源代码阶段
Parsed: 经过webpack打包后的大小
Gzipped: 经过Gzip压缩过后的大小,实际浏览器接收的大小,需要服务器开启Gzip压缩
这里的大小主要关注chunk-vendors.js和app.js。其他都跟首页加载关系不大。下面的首屏代码大小是这两个js代码大小之和。
chunk-vendors是引用的第三方库如element-ui、echarts、vue等等打包后的代码。app.js是项目的代码。
总大小首屏代码大小
Stat76.5M21.1M
Parsed80.5M24.2M
Gzipped13.5M5.9M
  • 这里只放Gzipped的大小,全部都放图太多了。
    image.png

3. 优化后体积(三倍左右的代码体积减少,打包后大小减少64M!)

总大小首屏代码大小
Stat30.2M15.2M
Parsed16.6M6.2M
Gzipped4.3M1.9M

image.png

4. 优化后首页加载速度(FCP快了13.6秒!)

image.png

  • 看到这有人说,虽然是快了13.6秒,但是还是要2.2s,还是不能秒开,你的年终还是不保啊。
  • 上面Lighthouse是不会用到缓存去检测性能的,为了有效他每次检测都相当于首次全部加载,打包后的css、js静态文件都是可缓存的。用户第二次打开时,是可以做到秒开。(年终有啦-.-)
    image.png

怎么优化 ✏️

1. 静态文件缓存(js,css等),图片和SVG进行压缩或者替换。

  • 这一点在优化官网的时候很有用!大多数官网代码都十分精简,首屏加载慢大多都是因为轮播图没压缩,文件太大请求慢导致的,用压缩工具压缩一下,或者让UI换个不失真占用空间小的即可解决问题。
  • 在用webpack-bundle-analyzer查看包大小的时候,发现一个SVG竟然有1.5M!你敢信?而且SVG不会经过打包有大小变化,就是即使经过Webpack打包,Gzip压缩,他也会占用1.5M的的大小,优化前也才5.9M,所以1.5M占比很大需要优化。
    • 为什么会有1.5M的SVG?
    • 图片可以转SVG,但是只是粗暴的将图片的base64编码塞到SVG里面,体积增大33%
    • 图片未经压缩,原图比较大(甩锅设计,哈哈哈)
  • 最后改为使用静态图片引用,而且不是首页需要用到的SVG,所以首页代码大大减少
  • 从下图可以看到支付宝相关的SVG都比较大,最后都被我用阿里的iconfont用更小的svg替换了,减少了2.5M左右的大小!
    image.png

2. 删掉无用路由、引用的库(实际未使用),然后启用树摇

  • 删掉无用路由很有用!加上树摇,可以去掉很多代码。正常来说公司自研的项目,每一个路由都是必要。但是这是第三方经过多人多年迭代的项目,很多路由都是没用的。
  • 还有一些库,在main.js文件里注册了Vue的全局组件,但是搜索整个项目根本没有用到,而且这个库还挺大的。又可以减少一些代码。
  • 这里有个奇葩的点是,webpack@4.46.0的版本必须要指定mode: 'production’才会启用树摇!否则打包大小基本和源代码大小一样,参考上面优化前源代码76.5M,打包后80.5M代码还多了一点!(也有可能树摇开启成功了,只是启用了production其他优化减少了体积,有没有大佬指导一下!)

3. 除了首页组件以外,其他组件改为异步组件,异步加载。同一个路由的组件打包到一个js上。减少首屏加载时请求数太多。

import Home from '@views/Home.vue'
const router = [// 首页不要异步,才用导入的方式打包到app.js,优先加载{path: '/home',component: Home},// 其他组件异步加载,多个小组件可以打包到一起,减少请求数,代码分离要恰到好处{path: '/xx',component: () => import(/* webpackChunkName: "xx" */ '@/views/xx.vue')}
],

4. 异步加载首页不需要用到的js和css文件。

  • 项目的index.html总有一些奇奇怪怪的js和css引入如下所示,会阻塞页面的解析,我们在前端首页解析完后(DOMContentLoaded事件)加载它们。
<linkrel="stylesheet"href="./luckysheet/plugins/css/pluginsCss.css" />
<linkrel="stylesheet"href="./luckysheet/plugins/plugins.css" />
<linkrel="stylesheet"href="./luckysheet/css/luckysheet.css" />
<linkrel="stylesheet"href="./luckysheet/assets/iconfont/iconfont.css" /><script src="./luckysheet/plugins/js/plugin.js"></script>
<script src="./luckysheet/luckysheet.umd.js"></script>
  • 比如这样
<script>document.addEventListener('DOMContentLoaded', () => {;['./luckysheet/plugins/js/plugin.js', './luckysheet/luckysheet.umd.js'].forEach((item) => {const script = document.createElement('script')script.defer = truescript.src = itemdocument.body.appendChild(script)});['./luckysheet/plugins/css/pluginsCss.css','./luckysheet/plugins/plugins.css','./luckysheet/css/luckysheet.css','./luckysheet/assets/iconfont/iconfont.css'].forEach((item) => {const link = document.createElement('link')link.rel = 'stylesheet'link.type = 'text/css'link.href = itemdocument.head.appendChild(link)})})</script>

5. 此外还有服务端开启http2、开启Gzip压缩,笔者优化之前已经开启所以没有对比,就不再赘述,实际上提升也非常大。

6. 最后效果

  • 大小、请求数、加载时间都大大减少
  • 注意优化后的时间chunk-vendors.js和app.js加载一共耗时1.59s,不是1.11+1.59,chunk-vendors的下载解析会阻塞app.js的下载解析,所以一共1.59s。
  • 前:

image.png

  • 后:

image.png

最后 🚁

Happy ending!年终保住了!(也可能没保住🐶)

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

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

相关文章

Qt做关于界面

在上位机系统中&#xff0c;经常需要显示当前软件版本&#xff0c;当前fpga版本&#xff0c;那么咱就做一个help的菜单的关于界面 解决的问题&#xff1a; 解决显示版本信息的UI Axure界面图&#xff1a; 如何实现&#xff1a; 实现文件的存储&#xff1a;QSetting来存储版…

玩转Virtual Box虚拟机

玩转Virtual Box虚拟机 虚拟化技术和虚拟机简介 什么是虚拟化技术&#xff1f; 虚拟化技术是将计算机的各种硬件资源予以抽象、转换、分割、组合的一种计算机技术。虚拟化技术打破了实体结构间不可切割的障碍&#xff0c;从而使用户可以按照需求重新组合硬件资源&#xff0c…

NX二次开发UF_MTX(矩阵运算)常用函数

目录 一、概述 二、函数的介绍 2.1 UF_MTX3_copy&#xff08;复制原来矩阵&#xff09; 2.2 UF_MTX3_determinant&#xff08;计算矩阵的行列式&#xff09; 2.3 UF_MTX3_identity&#xff08;单位矩阵&#xff09; 2.4 UF_MTX3_initialize&#xff08;可以根据X、Y方向向…

R: 阿尔法α多样性计算和箱图制作,以及差异分析

# install.packages("vegan") library(vegan) library(ggplot2) library(ggpubr)setwd("xxx") # 使用read.table()函数读取数据 df <- read.table("xxx", header TRUE, row.names 1)# 转置数据框 df <- t(df)# 计算每个样品的香农多样性…

【Linux】虚拟机与Xshell及VS Code的连接

一、基础环境 虚拟机&#xff1a;VMware Workstation Pro 虚拟机镜像&#xff1a;ubuntu-18.04.5-desktop-amd64.iso 其他&#xff1a;Xshell 6、Xftp 6、Visual Studio Code 上述软件的安装操作不再赘述&#xff0c;CSDN上有大量的优秀博文&#xff0c;可参考&#xff1a;详细…

SpringBoot---------Lombook

Lombok是一个可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具&#xff0c;通过使用对应的注解&#xff0c;可以在编译源码的时候生成对应的方法&#xff0c;也就是简化咱们之前pojo&#xff0c;实体类里面臃肿的get/set有参无参。 首先查看一…

学习51单片机 C语言知识

一、数据类型 C 语言包含的数据类型如下图所示 C51 的数据类型分为基本数据类型和组合数据类型&#xff0c;情况与标准 C 中的数据类型基本相同&#xff0c;但其中 char 型与 short 型相同&#xff0c;float 型与 double 型相同&#xff0c;另外&#xff0c;C51 中还有专门针…

免费一年期ssl证书怎么申请?看这里!(教育版、政务版)

自从去年年底开始&#xff0c;各大公有云陆续下架一年期的免费ssl证书&#xff0c;且申请数量都做了限制调整&#xff0c;那么现在去哪里申请免费一年期的ssl证书呢&#xff1f; 一、短期ssl证书 首先了解一下短期免费证书的平台&#xff0c;一般免费证书都为90天有效期&…

创新案例|Amazon.com 2023 年营销策略:电子商务零售巨头商业案例研究

2022 年最后一个季度&#xff0c;亚马逊报告净销售额超过 1,492 亿美元。这种季节性峰值是亚马逊季度报告的典型特征&#xff0c;但增长是不可否认的&#xff0c;因为这是该公司有史以来最高的季度。毫无疑问&#xff0c;这家电商零售巨头继续引领电商增长。本文将介绍我们今天…

木马——文件上传

目录 1、WebShell 2.一句话木马 靶场训练 3.蚁剑 虚拟终端 文件管理 ​编辑 数据操作 4.404.php 5.文件上传漏洞 客户端JS检测 右键查看元素&#xff0c;删除检测代码 BP拦截JPG修改为php 服务端检测 1.MIME类型检测 2.文件幻数检测 3.后缀名检测 1、WebShell W…

充气膜体育馆:为学校带来的健康运动环境

充气膜体育馆作为一种先进的建筑结构&#xff0c;配备先进的空气净化系统&#xff0c;为学校带来了重要的意义和价值。 充气膜体育馆不仅提供了室内运动场地&#xff0c;还通过先进的空气净化系统保障了学生在任何天气条件下都能进行健康的体育活动。尤其是在雾霾天气频繁的地区…

使用docker打包当前服务器的neo4j环境

Docker 是一个开源的应用容器引擎,它允许开发者将应用程序及其依赖打包到一个可移植的容器中,这样应用程序就可以在任何支持Docker的平台上运行,而无需担心环境差异。 当运行一个Docker容器时,它会加载一个镜像并运行它。Docker在容器内部创建一个隔离的环境,这个环境被称…

使用spring boot集成shardingsphere分库分表简易测试

根据如下pom整上一个spring-boot项目&#xff0c;spring-boot版本用2.3.5&#xff0c;shardingsphere用5.1.1。 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://ww…

7-25 念数字

题目链接&#xff1a;7-25 念数字 一. 题目 1. 题目 2. 输入输出格式 3. 输入输出样例 4. 限制 二、代码 1. 代码实现 #include <iostream> #include <string> using namespace std;const string pinyin[] { // 每个数字对应的拼音"ling","yi&…

【Hadoop】- YARN架构[7]

前言 Yarn架构是一个用于管理和调度Hadoop集群资源的系统。它是Hadoop生态系统的一部分&#xff0c;主要用于解决Hadoop中的资源管理问题。 通过使用Yarn架构&#xff0c;Hadoop集群中的不同应用程序可以共享集群资源&#xff0c;并根据需要动态分配和回收资源。这种灵活的资…

验证线缆(汽车线束、网线、多芯线)破损或断开与正常线缆的区别在哪里?依AEM CV-100 k50测试仪

工厂产线生产的线缆&#xff08;汽车线束、网线、多芯线&#xff09;做成成品&#xff0c;即2端都安装好了模块。在这种情况下如何快速的判定此条线缆是合格的呢&#xff0c;此处的合格为物理层面上的合格&#xff08;不会出现开路、短路&#xff09;&#xff0c;也就是最基本保…

client-go源码结构及客户端对象

一、基础知识介绍 1、GVR 和 GVK G Goup资源组&#xff0c;包含一组资源操作的集合VVersion资源版本&#xff0c;用于区分不同API的稳定程度及兼容性RResource资源信息&#xff0c;用于区分不同的资源APIKKind资源对象类型&#xff0c;每个资源对象都需要Kind来区分它自身代表…

冒泡排序c++

题目描述 编程输入n(1≤n≤20)个小于1000非负整数&#xff0c;然后自动按从大到小的顺序输出。&#xff08;冒泡排序&#xff09; 输入 第一行&#xff0c;数的个数n; 第二行&#xff0c;n个非负整数。 输出 由大到小的n个非负整数&#xff0c;每个数占一行。 样例输入 …

restful请求风格的增删改查-----修改and删除

一、修改&#xff08;和添加类似&#xff09; 前端&#xff1a; <script type"text/javascript">function update(){//创建user对象var user {id:$("#id").val(),username:$("#username").val(),password:$("#password").val…

探索VR数字展厅,对企业未来展示新模式

在数字化浪潮的推动下&#xff0c;企业展示也在经历着一场革命&#xff0c;VR数字展厅正在以一种全新的方式重塑我们的生活和工作空间&#xff0c;不仅重塑了客户的观展体验&#xff0c;也为企业营销打开了新的渠道。 VR数字展厅作为实体展厅的数字化延伸&#xff0c;正以其沉浸…