前言
前几天接到某项目的一个前端问题，一个移动端的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
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
