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

原创

已于 2024-04-22 10:47:51 修改 · 置顶 · 1.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #性能优化 #首屏优化 #webpack优化 #打包优化 #vue #webpack

于 2024-04-18 20:56:10 首次发布

文章讲述了作者对一个老旧的Vue2+ElementUI项目进行性能优化的过程，通过Lighthouse评估性能、webpack-bundle-analyzer分析代码体积，以及采用缓存、删除无用代码、异步加载等策略，显著提高了首页加载速度和文件大小。

需求背景

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

如何看优化是否做到位？

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

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

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()  
  ]  
};

这样在打包的时候会生成一个静态网站查看各个模块占用的存储空间大小

优化成果（有图有真相） 🔥

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

1. 优化前首页加载速度（FCP 15.8s）

2. 优化前体积（打包后大小80.5M）

Stat: 源代码阶段
Parsed: 经过webpack打包后的大小
Gzipped: 经过Gzip压缩过后的大小，实际浏览器接收的大小，需要服务器开启Gzip压缩
这里的大小主要关注chunk-vendors.js和app.js。其他都跟首页加载关系不大。下面的首屏代码大小是这两个js代码大小之和。
chunk-vendor