前言
前几天接到某项目的一个前端问题,一个移动端的H5页面,用手机4G网打开加载要十几秒,长达十几秒的白屏让用户接受不了。第二天就跑去现场看了下问题,然后给这个项目做了一些优化,晚上回来就想着把这事给记下来整理成文档,希望能给大家在前端项目优化上有所帮助。问题收集
在拿到代码还有去现场之前,就拿到了以下几个问题:- 所有手机都会出现这个问题,我这边的三星,苹果还有客户的华为折叠屏都有这种情况。
- 安卓和ios在清理缓存重新打开应用后会出现这个问题。
- 这边的情况是在用4G网的情况下,清理手机缓存后有很大的几率会出现这个问题,这个问题是显示空白页面,无法显示内容,跟群里的截图一样。在用WiFi的情况下,清理手机缓存,然后再进应用第一次加载比较慢,但是能进去,跟前面的进不去问题不一样。
问题分析
拿到这几个问题之后我首先想到这几个点:- 接口慢
- 网络慢
- 静态资源、js体积大导致加载慢
然后我把网络切到Fast 3G,页面加载完花费了11s。
看到这只能去拿代码分析了,我怀疑可能是引入了不必要的依赖导致的。
webpack插件:webpack-bundle-analyzer
分析代码之前,先讲一下这个东西,webpack-bundle-analyzer是一款webpack的可视化资源分析工具。它能够帮助我们真正的了解到包里的内容,并且能展示出各个模块在包里所占用的空间大小,最终能够帮助我们优化它。安装依赖
# npm
$ npm install --save-dev webpack-bundle-analyzer
# yarn
$ yarn add -D webpack-bundle-analyzer