服务器图片加载慢_技术分析 | 带薪划水可以，但绝不是以系统加载慢为理由！...

前言

前几天接到某项目的一个前端问题，一个移动端的H5页面，用手机4G网打开加载要十几秒，长达十几秒的白屏让用户接受不了。第二天就跑去现场看了下问题，然后给这个项目做了一些优化，晚上回来就想着把这事给记下来整理成文档，希望能给大家在前端项目优化上有所帮助。

问题收集

在拿到代码还有去现场之前，就拿到了以下几个问题：

• 所有手机都会出现这个问题，我这边的三星，苹果还有客户的华为折叠屏都有这种情况。
• 安卓和ios在清理缓存重新打开应用后会出现这个问题。
• 这边的情况是在用4G网的情况下，清理手机缓存后有很大的几率会出现这个问题，这个问题是显示空白页面，无法显示内容，跟群里的截图一样。在用WiFi的情况下，清理手机缓存，然后再进应用第一次加载比较慢，但是能进去，跟前面的进不去问题不一样。

问题分析

拿到这几个问题之后我首先想到这几个点：

• 接口慢
• 网络慢
• 静态资源、js体积大导致加载慢

后来拿到url地址之后，我用微信开发者工具看了一下，这个微信开发者工具那来看移动端页面还是蛮方便的。我的电脑用的是WiFi(我这WiFi网速只有450k/s左右)，发现加载确实有点慢，用了4s多。

然后我把网络切到Fast 3G，页面加载完花费了11s。

从图中可以看到，一个js文件达到了1.6M，WiFi下加载了4s多，问了下他们那边服务器有用到Gzip压缩，也就是说这个js原本比我们现在看到的还要大，然后找他们拿到了部署在服务器上的前端包，我发现这个js有4.8M。

看到这只能去拿代码分析了，我怀疑可能是引入了不必要的依赖导致的。

webpack插件：webpack-bundle-analyzer

分析代码之前，先讲一下这个东西，webpack-bundle-analyzer是一款webpack的可视化资源分析工具。它能够帮助我们真正的了解到包里的内容，并且能展示出各个模块在包里所占用的空间大小，最终能够帮助我们优化它。

安装依赖

# npm
$ npm install --save-dev webpack-bundle-analyzer
# yarn
$ yarn add -D webpack-bundle-analyzer