再战前端性能优化 超细节 超全面 实战操作 - zptime/blog GitHub Wiki

前言

之前写了一篇前端性能优化实战 从 30s 到 2s的文章，是从大方向上进行优化的，主要是插件的按需引入，加上 gzip 压缩配置。

随着项目的不断迭代，包体积又开始变大了，首屏加载也需要进一步优化了。

这篇主要是讲一下细节的优化点，进行进一步的优化处理。

优化前分析（v5.8 版本）

构建后文件分析

打包后的文件分析(npm run build)：

1. 有四张图片太大，需要优化(ic_empty_All.png, ic_outside_three.png, ic_download_kssl.png, ic_hotel_2.svg)
2. 入口文件总大小为 3.22MB，包括 runtime.js(4.41KB)、main.js(3.16MB，压缩后 804KB)、main.css(57.3KB)，总体太大，需要优化；
3. 其他文件大小，例如：common.js(56.6KB)，common.css(1.22KB)，vendor.js(184KB，压缩后 60KB)

构建后浏览器加载分析

打完包后运行(npm run start)，谷歌无痕浏览器初次加载页面分析：

（1）首次加载 login 页

1. 通过 scripts 引入的 js 文件(如 es6-promise.auto.min.js 和 m-polyfill-v5.3.js)，只要加载过一次，没有清除缓存，没有过期，就会直接从磁盘中加载（from disk cache）
2. 最大的文件就是 cmsMain.js 文件，因为是局域网，加载还是比较快的，88ms
3. 百度统计的文件（__webpack_hmr），蓝色的条比较长，说明阻塞了渲染，加载时间很长，6.9min
4. 底部Load：809ms标红了，加载时间

（2）加载 home 页比较

分析结果如下：

webpack-bundle-analyzer 包分析

// package.json文件
{
  "scripts": {
    "analyzer": "easy build prod -s",
    "stats": "easy build prod -s stats"
  },
}

// 运行命令
$ npm run analyzer

（1）vendor.js 分析：包大小为 184KB（压缩后 60KB）

（2）其他 js 包文件分析：所有包之和为 6.45MB（压缩后为 1.45MB），其中 main.js 为 3.16MB（压缩后 804KB）

lighthouse 报告分析

通过谷歌无痕浏览器内嵌的lighthouse 分析首页（home）

（1）谷歌浏览器 lighthouse 配置如下图所示：

（2）分析报告如下所示：

（3）具体分析报告见图 8-1，8-2，8-3，8-4，8-5

（4）可保存分析文件，以 JSON 或者 HTML 形式：lighthouse_v5.8_20210_0928.json 和 lighthouse_v5.8_20210_0928.html

通过分析网站：https://googlechrome.github.io/lighthouse/viewer/，加载上面的 json 文件，以后也可以看到具体的报告了

Quasar 优化(main.js 减少 62KB)

上一篇文章，对 Quasar 进行了按需引入配置。

Quasar 主要用于框架的搭建（头部，菜单栏，tags 导航栏）、登陆页和一些弹框提示。为了保证 UI 的统一，没多大必要用两个框架。

这次进行了代码的重构，将之前用到的一些 Quasar 组件用 Ant Design Vue 进行替换，再修改按需引入的组件配置，引入包就更小了。

整体布局和 Menu 没改，其他都改了，都换成了 Ant Design Vue。

（1）改造前 Quasar 对比

改造前 Quasar 的相关文件大小为 563.32KB(Gzipped 大小为 131.34 KB)：

改造后 Quasar 的相关文件大小为 453.75KB，减少了110KB：

（2）改造前后代码对比：

（3）改造前后包大小对比：所有包之和为 6.39MB（压缩后为 1.43MB），其中 main.js 为 3.1MB（压缩后 789KB），减少了0.06MB（即62KB）

图片优化(图片减少 57%)

具体可看再战前端性能优化之图片优化，图片资源减少了约 60%

图片资源优化前后对比：

• 优化前：4.6MB，110 张图片
• 优化后：2MB，减少了 57%，图片也减为 42 张了，减少了 68 张

测试环境对比（登陆页首次加载）

（1）优化前（正常浏览器）：

（2）优化后（无痕浏览器）：

有缓存的情况下，再次加载 home 页，可以分析：

1. 缓存 disk cache：打包的 css 文件、通过 script 引入的 js 文件
2. 缓存 memory cache：打包的 js 缓存，base64 图片
3. 多了很多 base64 图片，都是些小图标

代码分割优化(包减少 26%)

具体配置可看再战前端性能优化之代码分割，bundle 包减少了 26%

代码分割(Code Splitting)优化前后对比：虽然入口文件增加了 72 KB，但是 main.js 分成了两个文件，可以并行加载，仍会提高首屏速度

• 优化前：总包 6.57MB，入口文件 3.16MB，main.js3.1MB
• 优化后：总包 4.85MB(减少1.78MB)，入口文件 3.23MB(增加0.06MB)，main.js(1.86MB) + ant_design.js(1.31MB)

后续优化方向

之后的优化方向：

1. 针对 Lighthouse 的分析报告，进行逐项优化，提高分数
2. Performance 面板针对行优化
3. 组件性能优化
4. 开发性能优化
5. 重构优化

可参照接下来的项进行优化，当然有些是已经实现了的，下面列举的是优化总汇

Lighthouse 优化

具体分析报告以及解析可查看：Lighthouse 实战 超详细解析 逐项分析优化，根据 lighthouse 报告总结出了十多条优化建议

实际优化操作：先优化了如下几项，试下水

1. 字体样式控制：在 @font-face样式中添加font-display: swap
2. img 图片添加 alt 属性
3. a 标签添加可链接的 href 属性
4. PWA 配置开启

PWA 详细配置文档：easywebpack pwa 配置

vue组件性能优化大全

vue组件性能优化大全

重构方案和计划

随着项目的敏捷开发快速迭代，冗余代码和结构越来越多，适度的代码重构是很必要的，可提高代码的可读性和代码质量。

详细文章可查看：前端性能优化之重构方案和计划