（2020.12.7）初次web前端性能优化记录

（转载公司内部论坛本人文章2020.12.7）
导语： 作为客户端开发，由于项目的需要，最近一年陆续做了很多web前端的需求开发。但过去做的大部分都是单页面的运营H5，上线时间短，一般保证能稳定运行就行，并没有考虑太多性能相关的问题。最近半年承担了项目H5的开发工作，需要长期维护，而且是多页面的，这就不得不考虑H5性能相关的问题了。

我之前有做过安卓App冷启动时间优化（有兴趣的可以翻翻我之前的文章），此次接到优化H5首屏速度的需求，自然而然就想起过去优化客户端的一些经历，其中一个心得便是——尽可能的简化启动过程中的代码逻辑。

通常的web优化方法，基本围绕在资源加载和html渲染两个方面。前者针对首屏，后者针对可交互。资源优化上，我们总的方向是围绕更小的资源包上，比如常见的：压缩、减包、拆包、动态加载包及图片优化上。html渲染上总的方向是更快的展示内容，比如通过CDN分发、DNS解析、http缓存、数据预请求，数据缓存及直出等

我们项目H5采用Vue框架，多页面。这次优化主要针对首屏速度优化，所以这次优化的重点放在资源优化上。

一、优化首屏资源链接

1.资源链接按需加载

如上图所示，由于赛事H5分为横版和竖版，但为了更好的复用业务逻辑代码，所以代码和H5链接都是一样的，这就造成了无论打开横版还是竖版，都会同时加载两个css资源链接，这样会造成没必要的网络请求和资源消耗，这部分改成区分userAgent环境，按需加载。

2.资源链接支持gzip和cdn加速

如上图，重构同学提供的css链接，文件大小143kb。这个资源链接的问题在于并没有gzip，所以资源文件比较大，同时也没有支持CDN加速。

gzip：gzip是网站压缩加速的一种技术，对于开启后可以加快我们网站的打开速度，原理是经过服务器压缩，客户端浏览器快速解压的原理，可以大大减少了网站的流量
CDN加速：CDN能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

于是我将资源文件重新上传到腾讯云，腾讯云本身是可以支持gzip和cdn加速的。如上图，新链接文件大小只有22.7kb。

二、优化首屏资源大小

1.去掉与首屏无关的js资源

通过 webpack-bundle-analyzer 分析chunk-libs.js包含了许多与首屏启动无关的非必要第三方的js库。如上图的qcode库只在在用户未登录（属于极少数情况）下才需要用到该库，所以完全可以在需要用到该库时才去加载该js，所以可以改成用代码动态加载该js库,可以大大减少chunk-libs.js的大小。

 const script = document.createElement('script');
          script.type = 'text/css';
          script.src = url;
          const heads = document.getElementsByTagName('head');
          if (heads && heads.length > 0 && heads[0]) {
              heads[0].appendChild(script);
          }

2.动态import组件

如上图，webpack-bundle-analyzer 分析到webpack打包时，main.js包含了许多与首屏启动无关的vue组件，这些组件大部分都是需要用户手动点击某个按钮才会出现的弹窗。如果一并打包到main.js，会让main.js文件大小变得很大，而H5首屏都会加载main.js,这大大影响了首次启动的速度。

同时，由于前期多人开发造成多个页面引入了同一个组件，造成webpack打包时，把同一个组件打包到了多个页面的js文件中（如上图，member-verified组件打包到了11个js文件中），这造成了严重的冗余问题，也拖慢了每个页面的启动速度。
对于这些组件，我觉得理想的打包是将它们从页面js文件中分离出来，单独打包成一个js文件，从而实现在各个页面需要渲染该组件时才去动态加载该组件的资源文件，这样能很好的提升每个页面是启动速度。
于是我通过动态import组件的方式，让webpack对这些组件单独打包。

  components: {
    MemberVerified(resolve) {
      require(['../member-verified'], resolve);
    },
  }

动态import组件,组件会打包成单独的js文件，这样各个页面就可以对该组件实现按需加载（即需要显示该组件时，才去加载相应的js），同时也可以尽可能的缩小main.js文件大小，从而缩短首屏启动速度。

3.优化图片资源

和App一样，图片资源也是影响启动速度的一个大头。加载图片尺寸过大，占用资源，影响网络速度。
赛事H5中的图片都是存腾讯云，于是可以统一监听 v-lazy ，按需加载图片尺寸。

优化后效果

优化发布后，啄木鸟统计到的H5现网整页耗时有了明显的下降（如上图）。并且lighthouse性能分数也从原来的41分提升到了79分。

以上是初次尝试web前端性能优化的一些总结，如有不对之处，欢迎指出。